元素可视区 client 系列
时间:2022-07-26
本文章向大家介绍元素可视区 client 系列,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1. client概述
client 翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
2. 淘宝 flexible.js 源码分析
立即执行函数 (function(){})() 或者 (function(){}())
主要作用: 创建一个独立的作用域。 避免了命名冲突问题
下面三种情况都会刷新页面都会触发 load 事件。
1.a标签的超链接
2.F5或者刷新按钮(强制刷新)
3.前进后退按钮
但是 火狐中,有个特点,有个“往返缓存”,这个缓存中不仅保存着页面数据,还保存了DOM和JavaScript的状态;实际上是将整个页面都保存在了内存里。
所以此时后退按钮不能刷新页面。
此时可以使用 pageshow事件来触发。,这个事件在页面显示时触发,无论页面是否来自缓存。在重新加载页面中,pageshow会在load事件触发后触发;根据事件对象中的persisted来判断是否是缓存中的页面触发的pageshow事件
注意这个事件给window添加。
(function flexible(window, document) {
//获取的html的根元素
var docEl = document . documentElement
// dpr物理像素比
var dpr = window. devicePixelRatioll 1
// adjust body font size 设置我们body的字体大小
function setBodyFontSize() {
//如果页面中有body这个元素就设置body的字体大小
if (document.body) {
document.body.style.fontSize = (12 *dpr) + ' px';
} else {
//如果页面中没有body这个元素,则等着我们页面主要的DOM元素加载完毕再去设置body
//的字体大小
document.addEventListener( 'DOMContentLoaded', setBodyFontSize )
}
}
setBodyFontSize();
// set 1rem = viewwidth / 10 设置HTML元素文字大小
function setRemUnit() {
var rem = docEl.clientWidth / 10;
docEl.style.fontSize = rem +'px';
}
setRemUnit( )
// reset rem unit on page resize 当页面尺寸发生变化的时候重新设置rem大小
window . addEventL istener( 'resize',setRemUnit )
//pageshow页面重新加载时触发
window . addEventListener( ' pageshow', function(e) {
// e. persisted 返回的是true,从缓存取过来的页面也要重新加载 重新计算rem大小
if (e. persisted) {
setRemUnit( )
}
})
// detect 0.5px supports 有些移动端的浏览器不支持0.5像素的写法
if(dpr>=2){
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border='.5px solid transparent'
fakeBody.appendChild(testElement )
docE1.appendChild(fakeBody )
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl. removeChild(fakeBody)
}
}(window, document))
- 1022: [SHOI2008]小约翰的游戏John【Nim博弈,新生必做的水题】
- [接口测试 - http.client篇] 16 基于http.client之POM实战一下
- 数论部分第一节:素数与素性测试【详解】
- ProtoBuf 序列化工具组件
- C++STL vector简单使用练习1
- 小解Redis 系列
- 小侃 SQL加密和性能
- 接口测试 | 25 requests + pytest测试实例
- 接口测试 | 24 requests + unittest集成你的接口测试
- 接口测试 23 requests基础入门二
- 写让别人能读懂的代码+网页性能管理详解
- CDOJ 1330 柱爷与远古法阵【高斯消元,卡精度】
- Robot Framework | 04 参数化基于Public API的RFS测试
- 接口测试 | 22 requests基础入门
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法