元素的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.scrollTop
box.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);
    }
};

6. JS盒子模型操作_计算样式