精讲-offset系列、scroll系列、client系列~

时间 2019-11-29

标签 offset 系列 scroll client 繁體版

原文原文链接

前言：

相信不少人跟我同样，在实际开发中有时候须要用到原生js来获取一个元素的宽高，天真的觉得 document.getElementById('box').style.width 就能够获取到，可是结果常常事与愿违~这也让不少小伙伴摸不着头脑~这里我为何要说常常而不说老是呢？？是由于有时候能够获取有时候却不能。what????(黑人问号脸)还有这种操做？碰到这种状况的时候你是否是怀疑人生了，哈哈。。。。。bash

发生的缘由：之因此会出现有时候能够获取，有时候不能够获取的状况，是由于亲爱的你有时候把样式写在style标签中了，有时候又把样式写在style属性中了，你的不经意，却形成了很是大的差距呢~post

有如下两种状况：测试

在style标签中设置的样式属性获取不到；
在style属性中设置的样式属性是能够获取到的；

可是在实际开发中，咱们不多会把样式写在style属性中，那该如何获取呢？下面咱们就来讲一下offset系列~ui

offset系列：

offsetWidth：获取元素的宽(包含边框)
offsetHeight：获取元素的高(包含边框)
offsetLeft：获取元素距离左边的值
offsetTop：获取元素距离右边的值

<style>
    #box1{
        width: 200px;
        height: 200px;
        background: pink;
        position: absolute;
        left: 100px;
        top: 50px;
    }
    #box2{
        width: 100px;
        height: 100px;
        background: lightgreen;
    }
    #btn{
        position: absolute;
        top: 250px;
    }
    </style>
    
    
<body>
    <div id="box1" style="width:200px">
        <div id="box2"></div>
    </div>
    <input type="button" value="按钮" id="btn">

<script>
    var box1=document.getElementById('box1');
    var box2=document.getElementById('box2');
    document.getElementById('btn').onclick=function(){
        console.log(box1.style.width);      //200px
        console.log(box1.style.height);     //获取不到
        console.log(box1.offsetWidth);      //200
        console.log(box1.offsetHeight);     //200
        console.log(box1.offsetLeft);       //100
        console.log(box1.offsetTop);        //50
    }
</script>
</body>
复制代码

总结：由上能够看出，offset系列获取到的值都是数字类型，很容易操做spa

以上咱们主要是针对box1进行分析的，下面咱们对box2进行分析，按照如下两种状况依次分析,分析影响offsetLeft、offsetTop的因素有哪些(这里以offsetLeft为例)：3d

没有脱离文档流：code

offsetLeft:父级元素margin+父级元素padding+父级元素的border+本身的margincdn

脱离文档流了：blog

主要是本身的left和本身的margin ,与padding无关，与border无关 ip

scroll系列：

scrollWidth:元素中内容的实际的宽（没有边框），若是没有内容或是内容不足就是元素的宽
scrollHeight:元素中内容的实际的高（没有边框），若是没有内容或是内容不足就是元素的高
scrollLeft:向左卷曲出去的距离
scrollTop:向上卷曲出去的距离

该系列没有什么理解复杂的部分，经常使用的属性通常就是scrollLeft、scrollTop这两个属性，就是卷曲出去的值，这里我以为也没什么可分析的，就来给你们看一下经常使用的场景：

client系列：可视区域

clientWidth:可视区域的宽(没有边框)，边框内部的宽度
clientHeight:可视区域的高（没有边框），边框内部的高度
clientLeft:左边边框的宽度
clientTop:上面边框的宽度

总结：由上图能够看出来，client获取到的也是数字类型的值，并且clientLeft、clientTop结果与边框有关，通过测试，给box加上margin、padding后，上图的值不变，可见与margin、padding无关

最后：

看到这里，你们对这三个系列我想已经有了必定的认识与了解，在这以前，我写过一篇文章，原生js如何实现懒加载？，当时不理解这三个系列的宝宝们可能有点懵，如今回过头去看我想应该很是easy了吧~