BOM中与DOM中表示距离的属性

一、BOM（Browser Object Model）浏览器对象模型

        1.scrollTop/scrollLeft

                指的是可视区顶部距离页面顶部的距离，也叫竖直方向滚动条向下滚动的距离

                指的是可视区左部距离页面左部的距离，也叫横向滚动条产生的距离

        例子：

        let st = document.documentElement.scrollTop || document.body.scrollTop;
        console.log(st);
        btn.onclick = function () {
            document.documentElement.scrollTop = 0;
        }

        结果：（需要先有滚动条我们才能得出滚动条移动的距离）

scrollLeft与scrollTop同理，就不做演示

         2.scrollHeight/scrollWidth

                指页面内容的长度，该属性会将页面的完整宽高都会统计出来

                需注意scrollWidth会把滚动条的宽度剔除

        例子：

        // 页面内容的宽高
        // scrollHeight 内容高度
        // scrollWidth 内容宽度
        let sh = document.documentElement.scrollHeight
        console.log(sh);
        let sw = document.documentElement.scrollWidth
        console.log(sw);

        结果：

 二、DOM（Document Object Model）文档对象模型

        1.DOM中获取节点对象宽高的方法（4种）

                a. offsetWidth/offsetHeight

                获取到的是width + padding + border

                b. clientWidth/clientHeight

                获取到的是width + padding

                c. 节点名.style.width/节点名.style.height

                只能获取到行内样式的指，且取到的值有单位

                d. getComputedStyle(节点名)["width"] / getComputedStyle(节点名)["height"]

                既能获取到内部width/height，还可以取到外部引入的width/height

                例子:

     // 获取元素的宽高(4种)
        let div = document.querySelector('div');
        console.log(div.offsetWidth,div.offsetHeight); // width + padding + boder
        console.log(div.clientWidth,div.clientHeight); // width + padding
        console.log(div.style.width,div.style.height); // 只能取到行内样式的值，并且取到的值还有单位
        // 既能取到行内也能取到内部和外部引入的样式
        console.log(getComputedStyle(div)['width']);
        console.log(getComputedStyle(div)['height']);

                结果：

        2.DOM节点距离定位父级的左边距和上边距

                a. 左边距：offsetLeft

                b. 上边距：offsetTop

        注意：父元素必须有定位才可以获得上左边距

       例子：

        console.log(div.offsetLeft,div.offsetTop);

        结果：因为我的css样式没有清除固定的边距，所以有8像素

 

---

总结：

DOM中获取元素的宽高方法

        offsetWidth/offsetHeight

        clientWidth/clientHeight

        节点名.style.width/节点名.style.height

        getComputedStyle(节点名)["width"]/getComputedStyle(节点名)["height"]

DOM对象距离定位父级的左边距（offsetLeft）和上边距（offsetTop）------>注意父元素必须有定位

BOM中表示距离的属性

        scrollTop/scrollLeft（浏览器可视区顶部距离页面顶部的距离）

        scrollHeight/scrollWidth（当前页面的全部高度和宽度）