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

川长思鸟来 2022-01-18 23:33 267阅读 0赞

## 前言： ##

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

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

有以下两种情况：

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

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

## offset系列： ##

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

总结：由上可以看出，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如何实现懒加载？][js]，当时不理解这三个系列的宝宝们可能有点懵，现在回过头去看我想应该非常easy了吧~

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

[js]: https://juejin.im/post/5cef9759e51d45105e021248