【零代码】4张图彻底搞清楚offsetWidth，clientWidth，offsetLeft，clientLeft，offsetX，clientX，scrollLeft，scrollWidth

【零代码】4张图彻底搞清楚offsetWidth，clientWidth，offsetLeft，clientLeft，offsetX，clientX，scrollLeft，scrollWidth

---

ES5-ES9碎片知识整理

关于元素的位置与尺寸网上的讲解和介绍非常的多，下面这张图片应该是囊括的比较齐全了。但是弊端也比较明显，将所有的属性都糅合在了一起，非常不利于区分和理解。本文将元素的offsetWidth，clientWidth，offsetLeft，clientLeft，offsetX，clientX，scrollLeft，scrollWidth等难以理解和容易混淆的属性区分开来，分别作图讲解其中的区别，帮助大家快速立即和建立知识记忆。

---

clientWidth 和 offsetWidth

• 先开图，再分析

图中蓝色部分表示元素的边框，根据图示结合盒子模型很容易得出以下结论：

1. clientWidth = width + padding*2 (内边距指左右内边距)
2. offsetWidth = width + padding2 + border2 （边框至左右边框）
3. 根据1，2 可知clientWidth与offsetWidth之间的区别就在于是否包含左右边框 ,可记作

我求元素内部宽，margin和我无相关；
自身宽度到padding，偏置带框比我宽

知识扩展

在盒模型box-sizing : content-box模式下，若元素宽为100px，padding为10px，border为1px。则：clientWidth为120px；offsetWidth为122px。
如若盒子模型为border-box同样是上述数据，此时clientWidth为98px，offsetWidth为100px;

---

clientLeft 和 offsetLeft

4. 先开图，再分析
   

图中蓝色部分表示元素的边框，绿色边框表示body元素或者是设置定位属性的父辈元素，根据图示结合盒子模型很容易得出以下结论：

1. clientLeft = border-left (左边框宽)
2. offsetLeft = 左外边框到绿色框线的距离。

此处绿色框线需要分两种情况讨论

1. 当前元素的所有父辈元素没有设置定位：此时offsetLeft指的是当前元素外边框到body元素边缘的距离（包含body的边框和内外边距）
2.当前元素的父辈有设置定位如绝对定位，绿色框表示定位父元素的内边框。（不含定位元素的边框和margin）

可记作：

自身左边是边框，偏置直达定位父；
没有父辈被定位，body margin算在内

---

clientX 和 offsetX

• 先开图，再分析
  
  clientX与offsetX用于描述鼠标点击的位置，因此在分析这两个属性之前，先要给元素设置一个click事件。图中蓝点表示鼠标点击的位置。

图中蓝色部分表示元素的边框，绿色边框表示浏览器有效区域，根据图示很容易得出以下结论：

1. offsetX = 鼠标点击位置到触发鼠标事件元素内边框的距离
2. clientX = 鼠标点击位置到浏览器有效区域左边的距离

scrollLeft 和 scrollWidth

• 先开图，再分析
  
  为了分析scrollLeft 和scrollWidth之间的区别，特意将亮蓝色所示元素设置为可滚动区域。由于此处不好标注故没在图中具体说明。具体解释如下

• scrollLeft表示当前元素通过滚动条向左滚动了多上距离，也就是隐藏在视图区域左边的部分。随着滚动条位置变化而变化
• scrollWidth表示可滚动区域的宽度通常是个固定值，不会随着滚动条改变。

---

（完）

今天的分享就到这里，如若文中有什么纰漏或者错误欢迎大家批评指正！

欢迎大家关注微信公众号 : 前端牧码人

----------------------------------------------学前端，做快乐牧码人--------------------------------------------------------------------