元素的style下的属性，默认为空字符串，可以通过getComputedStyle(element).属性,获取到的结果为带单位的字符串;如下：
document.onclick = function () {
box.style.height = '100px';
// 获取box的宽度
console.log(box.style.width); // 空
console.log(getComputedStyle(box).height); // 100px
}
基于一些属性和方法，让我们能够获取到当前元素的样式信息，
例如：
- client:
- width/height
- top/left
- offset
- width/height
- top/left
- parent
- scroll
- width/height
- top/left
1、client(不带单位)
-
获取盒子可视区域的宽高（支持padding,不包含边框）
clientWidth
clientHeight
- 内容溢出与否对它无影响;
- 获取的结果是没有单位的(其余的盒模型属性也是);
- 获取的结果是整数，它会自己进行四舍五入(其余的盒模型属性也是);
获取盒子左边框和上边框的大小
clientLeft
clientTop
边框尺寸
getComputedStyle(box3).borderTopWidth边框尺寸获取当前页面一屏幕（可视化）区域的宽高
let winW = document.documentElement.clientWidth || document.body.clientWidth;
let winH = document.documentElement.clientHeight || document.body.clientHeight;
image.png
2、Offset
1、获取盒子可视区的宽高(内容宽度+左右padding+左右border)
offsetWidth
offsetHeight
在client的基础上加上border== 盒子本身的宽高
offsetTop：距离其父参照物的上偏移offsetLeft：距离其父参照物的左偏移（当前元素的外边框到父参照物的里边框）offsetParent：获取它的父参照物（不一定是父元素）
getBoundingClientRect()当前元素到页面可视区的尺寸、距离
注意:是跟滚动条走的。
width/height/left/right/top/bottom/x/y
父参照物和它的父元素没有必然的联系，父参照物查找：同一个平面中，最外层元素是所有后代元素的父参照物，而基于position:relative/absolute/fixed 可以让元素脱离文档流（一个新的平面），从而改变元素的父参照物
document.body.offsetParent === null
3、scroll
scrollWidth
scrollHeight
在没有内容溢出的情况下，获取的结果和client是一样的
在有内容溢出的情况下，获取的结果约等于真实内容的宽高（上/左padding + 真实内容的高度/宽度）
- 1.不同浏览器获取的结果不尽相同
- 2.设置overflow属性值对最后的结果也会产生一定的影响；
获取整个页面真实的高度
document.documentElement.scrollHeight || document.body.scrollHeight
box.scrollTopbox.scrollLeft
let box = document.getElementById('box');
//=>竖向滚动条卷去的高度
//=>横向滚动条卷去的宽度
//1.边界值
//min=0
//max=整个的高度scrollHeight - 一屏幕高度clientHeight
box.scrollTop
box.scrollLeft
//=>13个盒子模型属性，只有这两个是“可读写”的属性（既可以获取也可以设置对应的值），其余的都是“只读”属性（不能设置值，只能获取）
box.scrollTop=0;
4、滚动条的距离
- 滚动条的距离，只能读不能写
window.pageYOffset/window.pageXOffset
window.scrollTo(x,y)专门用来写滚动条距离的 - 滚动条的距离，既能读也能写(document.documentElement=HTML)
document.documentElement.scrollTop
document.onclick = function(){
console.log(window.pageYOffset)
console.log(document.documentElement.scrollTop)
console.log(document.documentElement.scrollLeft)
document.documentElement.scrollTop = 0; // => NO
window.scrollTo(0,300); //=> yes
}
5、获取浏览器的尺寸
window.innerWidth/window.innerHeight
注意:
window.innerWidth/window.innerHeight如果有滚动条，会计算滚动条距离；1280
document.body.clientWidth(浏览器的尺寸,排除滚动条的) 1263
绝对位置
<script>
/*
* offset：获取当前元素距离BODY的左/上偏移（不论其父参照物是谁）
* @params
* curEle:current element当前要操作的元素
* @return
* [object]包含上/左偏移的信息 => {top:xxx,left:xxx}
* by LYR on 2019/01/01
*/
function offset(curEle) {
let par = curEle.offsetParent,
l = curEle.offsetLeft,
t = curEle.offsetTop;
//存在父参照物，而且还没有找到BODY
while (par && par.tagName !== "BODY") {
//在原有偏移的基础上累加：父参照物的边框、父参照物的偏移
if (!/MSIE 8\.0/.test(navigator.userAgent)) {
//IE8中偏移值自已就算了边框了，不需要我们在加边框的值 navigator.userAgent获取当前浏览器的版本信息
l += par.clientLeft;
t += par.clientTop;
}
l += par.offsetLeft;
t += par.offsetTop;
//继续获取上级参照物
par = par.offsetParent;
}
return {
top: t,
left: l
};
}
</script>
回到顶部
<body>
<a href="javascript:;" id="link" class="link">回到顶部</a>
<script>
let HTML = document.documentElement,
LINK = document.getElementById('link');
// 1.当浏览器滚动条滚动的时候，我们进行验证：卷去的高度超过两屏，我们让#LINK显示
function check() {
//winH:一屏幕高度 scrollT:卷去的高度
let winH = HTML.clientHeight,
scrollT = HTML.scrollTop;
LINK.style.display = scrollT >= winH * 2 ? 'block' : 'none';
}
window.onscroll = check;
// 2.点击回到顶部
LINK.onclick = function () {
/* 让按钮隐藏 */
LINK.style.display = 'none';
//先禁止滚动事件触发（因为在回到顶部的运动过程中，如果事件一直在，会计算按钮显示隐藏的样式，无法让按钮隐藏）
window.onscroll = null;
/* 实现动画 */
let step = 1000;
let timer = setInterval(() => {
//每一次获取最新的SCROLL-TOP值，在现有的基础上减去步长，让其走一步
let curT = HTML.scrollTop;
if (curT === 0) {
//边界判断：已经回到顶部后，我们清除定时器
clearInterval(timer);
//恢复滚动条滚动的监听事件
window.onscroll = check;
return;
}
curT -= step;
HTML.scrollTop = curT;
}, 17);
};
//SET-INTERVAL：设置一个定时器（TIMER代表这个定时器），每间隔INTERVAL这么久，就会把FUNCTUION执行一次...一直到手动清除定时器为止
// let timer = setInterval([FUNCTUION], [INTERVAL]);
// clearInterval(timer);
</script>
</body>
延迟加载
/*
* offset：获取当前元素距离BODY的左/上偏移（不论其父参照物是谁）
* @params
* curEle:current element当前要操作的元素
* @return
* [object]包含上/左偏移的信息 => {top:xxx,left:xxx}
* by LYR on 2019/01/01
*/
function offset(curEle) {
let par = curEle.offsetParent,
l = curEle.offsetLeft,
t = curEle.offsetTop;
while (par && par.tagName !== "BODY") {
if (!/MSIE 8\.0/.test(navigator.userAgent)) {
l += par.clientLeft;
t += par.clientTop;
}
l += par.offsetLeft;
t += par.offsetTop;
par = par.offsetParent;
}
return {
top: t,
left: l
};
}
/*
* 图片完全显示出来的条件
* A:盒子底边距离BODY（页面最顶端）的距离：盒子的高度+盒子距BODY的上偏移
* B:浏览器底边距离BODY的距离：一屏幕的高度 + 卷去的高度
* A<=B：盒子就完全出现在用户的视野中
* 让图片显示
* 获取图片TRUE-IMG属性的值，赋值给SRC属性，当图片能正常加载出来后，让图片显示即可
*/
let imgBox = document.querySelector('.imgBox'),
_img = imgBox.querySelector('img');
//=>显示图片
//curImg:要显示的图片
function lazyImg(curImg) {
//给SRC赋值真实的图片地址
let trueImg = curImg.getAttribute("trueImg");
curImg.src = trueImg;
//校验图片是否能够正常加载出来：IMG.ONLOAD事件用来监听图片是否能加载
curImg.onload = function () {
curImg.style.display = 'block';
};
//=>设置自定义属性:isLoad存储当前图片已经加载过了
curImg.isLoad = true;
}
//=>监听页面滚动事件（不论基于什么方式，只要页面滚动了，则触发事件）
window.onscroll = function () {
//=>已经加载过就不要在重复加载了
if (_img.isLoad) return;
let HTML = document.documentElement,
B = HTML.clientHeight + HTML.scrollTop,
A = imgBox.offsetHeight + offset(imgBox).top; //=>当前案例中，获取距离BODY的上偏移完全可以imgBox.offsetTop，因为父参照物就是BODY
if (A <= B) {
//=>符合图片显示的条件了
lazyImg(_img);
}
};
