DOM元素尺寸获取

offset

获取盒模型的尺寸，可视宽高 包含边框

<div>
     <p></p>
</div>

    <script>
        var box = document.querySelector('div');
        var p = document.querySelector('p');

        // 盒模型的宽度  包含边框
        console.log(box.offsetWidth);
        console.log(box.offsetHeight);

        // 获取相对于(定位)父级的left   定位父级
        console.log(box.offsetLeft);
        console.log(box.offsetTop);
        console.log(p.offsetLeft);
    </script>

client

可视宽高度 不包含边框 即自身内容尺寸

        // 不包含border 可视宽高度 自身内容尺寸
        console.log(box.clientWidth);
        console.log(box.clientHeight)

        // 上边框宽度
        console.log(box.clientTop)  //上边框宽度
        console.log(box.clientLeft)   //左边框宽度

scroll

也是自身内容尺寸 但包含 滚动条滚动的尺寸

        // 内容宽度   这里用在box上面时 和上面的 clientWidth可视区显示的结果是一样的
        console.log(box.scrollWidth);
        console.log(box.scrollHeight);

scroll和client的区别

当我们在用定义的box计算其scrollWidth和clientWidth时发现结果一样，都是计算其自身内容的尺寸(不包含边框)，但是 如果是用在计算整个页面的width时（有滚动条的情况下） 两者的显示结果会不一样 client只计算当前可视区的尺寸 而 scrollwidth还可以计算包括滚动条在内的尺寸大小

        // 当前浏览器可视区宽度  不包括页面滚动的宽度高度
        console.log(document.documentElement.clientWidth);
        console.log(document.documentElement.clientHeight)
        // console.log(document.documentElement.clientHeight);


        // 内容高度  有滚动条时会更明显
        console.log(document.documentElement.scrollHeight)
        console.log(document.documentElement.scrollWidth)

getBoundingClientRect()

getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器可视区的位置 (也就是相对于页面的左上角)。这个方法没有参数。它会返回一个Object对象，该对象有6个属性：left right top bottom width height

        var box = document.querySelector('div');
        window.onscroll = function(){

            // getBoundingClientRect()
            var clientRect = box.getBoundingClientRect();
            
            //可视区相对位置

            console.log(clientRect);
            console.log(clientRect.left);   //元素左侧距离可视区左侧的距离
            console.log(clientRect.top);   //元素顶部距离可视区域的距离
            console.log(clientRect.bottom);  //元素底部距离可视区域的距离
            console.log(clientRect.right);  //元素右侧距离可视区左侧的距离

            console.log(clientRect.width);   //可视宽度
            console.log(clientRect.height);   //可视高度
            }