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

最新推荐文章于 2020-03-27 20:28:14 发布

weixin_33716154

最新推荐文章于 2020-03-27 20:28:14 发布

阅读量79

点赞数

原文链接：https://juejin.im/post/5cf64d4c5188253b24412801

版权

前言：

相信很多人跟我一样，在实际开发中有时候需要用到原生js来获取一个元素的宽高，天真的以为 document.getElementById('box').style.width 就可以获取到，但是结果经常事与愿违~这也让很多小伙伴摸不着头脑~这里我为什么要说经常而不说总是呢？？是因为有时候可以获取有时候却不能。what????(黑人问号脸)还有这种操作？碰到这种情况的时候你是不是怀疑人生了，哈哈。。。。。

发生的原因：之所以会出现有时候可以获取，有时候不可以获取的情况，是因为亲爱的你有时候把样式写在style标签中了，有时候又把样式写在style属性中了，你的不经意，却造成了非常大的差距呢~

有以下两种情况：

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

但是在实际开发中，我们很少会把样式写在style属性中，那该如何获取呢？下面我们就来说一下offset系列~

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系列获取到的值都是数字类型，很容易操作

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

没有脱离文档流：

offsetLeft:父级元素margin+父级元素padding+父级元素的border+自己的margin

脱离文档流了：

主要是自己的left和自己的margin ,与padding无关，与border无关

scroll系列：

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

该系列没有什么理解复杂的部分，常用的属性一般就是scrollLeft、scrollTop这两个属性，就是卷曲出去的值，这里我觉得也没什么可分析的，就来给大家看一下常用的场景：

client系列：可视区域

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

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

最后：

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

转载于:https://juejin.im/post/5cf64d4c5188253b24412801

weixin_33716154

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
精讲-offset系列、scroll系列、client系列~

前言：相信很多人跟我一样，在实际开发中有时候需要用到原生js来获取一个元素的宽高，天真的以为 document.getElementById('box').style.width 就可以获取到，但是结果经常事与愿违~这也让很多小伙伴摸不着头脑~这里我为什么要说经常而不说总是呢？？是因为有时候可以获取有时候却不能。what????(黑人问号脸)还有这种操作？碰到这种情况的时候你是不是怀疑人生了，哈...
复制链接

扫一扫