JS盒子模型属性
- JS盒子模型 通过JS中的属性和方法获取元素的属性信息
- client
- clientWidth / clientHeight
- clientWidth 内容宽度 + 左右padding
- clientHeight 内容高度 + 上下padding
- clientLeft / clientTop
- clientLeft 左边框
- clientTop 上边框
- offsetWidth / offsetHeight
- offsetWidth = clientWidth(内容宽+左右padding) + 左右边框
- offsetHeight = clientHeight(内容高+上下padding) + 上下边框
- scoll系列
- scrollLeft(横向滚动条卷去的距离)
- scrollTop(纵向滚动条卷去的距离)
- 滚动条 卷去的距离,默认是0,具体是多少要看滚动条滚动了多少
- 获取浏览器的窗口滚动的距离
let sc = document.documentElement.scrollTop || document.body.scrollTop;
- scrollHeight/scrollWidth
- 没有溢出时:scrollHeight/scrollWidth 等于 clientHeight/clientWidth
- 内容溢出时:scrollHeight = clientHeight + 溢出内容高度;
- 内容溢出时:scrollWidth= clientWidth + 溢出内容高度;
- 获取浏览器窗口的盒模型属性
let winW = document.documentElement.clientWidth || document.body.clientWidth;
let winH = document.documentElement.clientHeight || document.body.clientHeight;
function win(attr, val) {
if (typeof val !== "undefined") {
document.documentElement[attr] = document.body[attr] = val;
}
return document.documentElement[attr] || document.body[attr];
}
console.log(win('scrollTop'));
console.log(win('screenTop', 1000));
- 偏移值 offsetLeft和offsetTop
- 父级参照物 距离当前元素最近的有定位属性的父级元素,如果没有的话默认 body
封装win方法
function win(attr, val) {
if (typeof val !== "undefined") {
// 传2个值的时候是设置,传一个值是获取
document.documentElement[attr] = document.body[attr] = val;
}
return document.documentElement[attr] || document.body[attr];
}
console.log(win('scrollTop'));
console.log(win('screenTop', 1000));
计算生效的样式
- ele.style(可读可写) 只能获取或设置行内样式
box.stytle.xxx
box.style.xxx = xxx
- 获取浏览器最终计算生效后的样式 window.getComputedStyle(元素对象,伪类) 不需要伪类 写null
- 返回一个对象 对象中包含该元素所有的样式
- IE6-8不支持该语法
- IE中获取计算过的生效样式 元素对象.currentStyle属性 属性值是一个对象 存储了该元素生效的所有样式
封装getCss方法 并处理兼容问题
// 优化:去除单位、同一 透明度样式:
function getCss(ele, attr) {
var value;
if ('getComputedStyle' in window) {
value = window.getComputedStyle(ele, null)[attr];
} else {
// 判读获取的属性是否是透明度,如果是需要给IE的透明度属性进行特殊处理
if (attr === 'opacity') {
value = ele.currentStyle['filter'];
var reg2 = /^alpha\(opacity=(.+)\)$/;
value = reg2.exec(value)[1] / 100;
} else {
value = ele.currentStyle[attr];
}
}
// 去除单位: 只有是数字带单位的情况下才需要去除单位
var reg = /^-?\d+(\.\d+)?(px|pt|rem|em)$/i;
if (reg.test(value)) {
value = parseFloat(value);
}
}
console.log(getCss(box, 'width'));
console.log(getCss(box, 'opacity'));
图片懒加载 在某个合适的时机去加载这张图片 一般是图片进入浏览器可视区域或者即将进入可视区域
- 原理
- 实现延时加载,不直接给 img 标签设置 src 属性,而是选择自定义其他属性保存其图片资源路径;等到何时的时机,再获取这个自定义属性值,再赋值给图片的 src 属性,此时,浏览器会根据这个 src 去加载图片。
- 单张图片懒加载
-当图片即将进入浏览器可视窗口
- 监听页面的滚动事件 当页面滚动时 计算图片什么时候进入可视窗口
- 进入浏览器可视窗口条件 :(图片上外边距离页面顶端的距离 - 浏览器的可视窗口的高度 - 页面纵向滚动条卷去的距离) <= 0
- 现实项目中 先动态创建一个img标签 用动态创建的 img 去尝试加载,加载成功就再给页面中的图片 src 属性赋值。
- 多张图片懒加载
- 监听可视页面所有图片
- 监听页面中的onscroll事件 在事件函数中 计算每张图片是否即将出现在浏览器的可视窗口
- 当前图片即将进入,就进行该图片的加载
- 加载之前需要判断该图片是否有src属性 若有 就说明图片已经加载过 就不需要重新加载