元素可视区 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))
- 在一个空ASP.NET Web项目上创建一个ASP.NET Web API 2.0应用
- 小论线性变换
- 谈谈基于OAuth 2.0的第三方认证 [下篇]
- Razor Engine,实现代码生成器的又一件利器
- 谈谈基于OAuth 2.0的第三方认证 [上篇]
- 我所理解的RESTful Web API [Web标准篇]
- ASP.NET Web API中的Controller
- iOS 转场动画探究(二)
- Swift 面向对象解析(二)
- 谈谈基于OAuth 2.0的第三方认证 [中篇]
- [ASP.NET Web API]如何Host定义在独立程序集中的Controller
- ASP.NET Web API自身对CORS的支持: EnableCorsAttribute特性背后的故事
- 【黑客解析】黑客是如何实现数据库勒索的 ?
- 直播回看:高可用架构入门 —— 腾讯云架构演变及经验
- 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 数组属性和方法
- 浙大版《C语言程序设计(第3版)》题目集 练习3-4 统计字符
- SQL 语句单引号、双引号的用法
- 浙大版《C语言程序设计(第3版)》题目集 练习3-5 输出闰年
- 浙大版《C语言程序设计(第3版)》题目集 练习3-7 成绩转换
- 浙大版《C语言程序设计(第3版)》题目集 练习3-8 查询水果价格
- 浙大版《C语言程序设计(第3版)》题目集 习题3-1 比较大小
- 浙大版《C语言程序设计(第3版)》题目集 习题3-3 出租车计价
- 浙大版《C语言程序设计(第3版)》题目集 习题3-4 统计学生成绩
- 浙大版《C语言程序设计(第3版)》题目集 习题3-5 三角形判断
- 浙大版《C语言程序设计(第3版)》题目集 练习4-3 求给定精度的简单交错序列部分和
- Linux 如何手动释放Swap、Buffer和Cache
- 浙大版《C语言程序设计(第3版)》题目集 练习4-6 猜数字游戏
- 浙大版《C语言程序设计(第3版)》题目集 练习4-7 求e的近似值
- TypeScript高级类型备忘录(附示例)
- 浙大版《C语言程序设计(第3版)》题目集 练习4-10 找出最小值