JavaScript回顾学习：元素的client\offset\scrollHeight

骑猪看日落 2022-05-19 06:21 184阅读 0赞

整理下关于元素的属性：

clientHeight、clientWidth、clientLeft、clientTop

offsetHeight、offsetWidth、offsetLeft、offsetTop

scrollHeight、scrollWidth、scrollLeft、scrollTop

<html>
    
    <head>
        <title>call</title>
        <style>
            #box {
                margin: 100px;
                padding: 30px;
                width: 300px;
                height: 200px;
                border: 15px solid green;
                line-height: 30px;
                font-size: 14px;
                overflow: auto;
            }
        </style>
    </head>
    
    <body>
        <div id="box">
            有兴趣的同学，可以自行搜索雅虎关于前端优化的十四条规则。但这些规则当中，有多少是需要前端工程师付诸实践的？就我来说，CDN、缓存的设置，就是不需要我去关心的（作为一个苦逼外包，是没有权限去生产环境操作的）也就是说，一些优化的方法，可能只是需要前端工程师知道，说得难听点，就是应付面试，工作中遇不到。反而是一些工作中真正遇到的难题，面试中却很少被问到（纯属个人经验）。有些问题，同行们（包括我）可能稀里糊涂地用正确的方式解决了，但实际上，却并不知道自己为什么这样做。
        </div>
    
        <script>
            window.onload = function () {
                var box = window.document.getElementById('box');
                
                //元素盒子模型
                console.log(box.clientHeight); //260 就是css中定义的height + 上下padding
                console.log(box.clientWidth); //360 就是css中定义的width + 左右padding
    
                console.log(box.clientLeft); //15 就是border左边的宽度
                console.log(box.clientTop); //15 就是border上边的高度
    
                console.log(box.offsetHeight); //280 就是css中定义的height + 上下padding + 上下border
                console.log(box.offsetWidth); //280 就是css中定义的width + 左右padding + 左右border
                console.log(box.offsetLeft); //当前元素的左外边框距离父级参照物的左内边框的偏移量
                console.log(box.offsetTop);  //当前元素的上外边框距离父级参照物的上内边框的偏移量
    
                console.log(box.scrollHeight); //真实内容的高度(包括溢出) + 上填充，如果没有溢出，等于box.clientHeight
                console.log(box.scrollWidth); //真实内容的宽度(包括溢出) + 左填充，如果没有溢出，等于box.clientWidth 
                //获取到的结果是约等于值，因为是否设置overflow='hidden'对于最终结果都是有影响的
                console.log(box.scrollLeft); //滚动条卷去的宽度
                console.log(box.scrollTop); //滚动条卷去的高度
    
    
                //获取/设置浏览器盒子模型的width/height/top/left，必须写两套
                console.log(document.documentElement.clientHeight || document.body.clientHeight); //是当前浏览器可视窗口的高度（也就是一屏幕的高度，肉眼可看到的高度）
                console.log(document.documentElement.clientWidth || document.body.clientWidth);//是当前浏览器可视窗口的宽度（也就是一屏幕的宽度，肉眼可看到的宽度）
                console.log(document.documentElement.scrollHeight || document.body.scrollHeight); //是当前页面的真实高度
                console.log(document.documentElement.scrollWidth || document.body.scrollWidth); //是当前页面的真实宽度
            }
        </script>
    </body>
    
    </html>