【零代码】4张图彻底搞清楚offsetWidth，clientWidth，offsetLeft，clientLeft，offsetX，clientX，scrollLeft，scrollWidth
文章目录
ES5-ES9碎片知识整理
关于元素的位置与尺寸网上的讲解和介绍非常的多，下面这张图片应该是囊括的比较齐全了。但是弊端也比较明显，将所有的属性都糅合在了一起，非常不利于区分和理解。本文将元素的
offsetWidth，clientWidth，offsetLeft，clientLeft，offsetX，clientX，scrollLeft，scrollWidth等难以理解和容易混淆的属性区分开来，分别作图讲解其中的区别，帮助大家快速立即和建立知识记忆。
clientWidth 和 offsetWidth
- 先开图，再分析
图中蓝色部分表示元素的边框，根据图示结合盒子模型很容易得出以下结论：
- clientWidth = width + padding*2 (内边距指左右内边距)
- offsetWidth = width + padding2 + border2 （边框至左右边框）
- 根据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
-
先开图，再分析
图中蓝色部分表示元素的边框，绿色边框表示body元素或者是设置定位属性的父辈元素，根据图示结合盒子模型很容易得出以下结论：
- clientLeft = border-left (左边框宽)
- offsetLeft = 左外边框到绿色框线的距离。
此处绿色框线需要分两种情况讨论
1. 当前元素的所有父辈元素没有设置定位：此时offsetLeft指的是当前元素外边框到body元素边缘的距离（包含body的边框和内外边距）
2.当前元素的父辈有设置定位如绝对定位，绿色框表示定位父元素的内边框。（不含定位元素的边框和margin）
可记作：
自身左边是边框，偏置直达定位父；
没有父辈被定位，body margin算在内
clientX 和 offsetX
-
先开图，再分析
clientX与offsetX用于描述鼠标点击的位置，因此在分析这两个属性之前，先要给元素设置一个click事件。图中蓝点表示鼠标点击的位置。
图中蓝色部分表示元素的边框，绿色边框表示浏览器有效区域，根据图示很容易得出以下结论：
- offsetX = 鼠标点击位置到触发鼠标事件元素内边框的距离
- clientX = 鼠标点击位置到浏览器有效区域左边的距离
scrollLeft 和 scrollWidth
-
先开图，再分析
为了分析scrollLeft 和scrollWidth之间的区别，特意将亮蓝色所示元素设置为可滚动区域。由于此处不好标注故没在图中具体说明。具体解释如下
- scrollLeft表示当前元素通过滚动条向左滚动了多上距离，也就是隐藏在视图区域左边的部分。随着滚动条位置变化而变化
- scrollWidth表示可滚动区域的宽度通常是个固定值，不会随着滚动条改变。
（完）
今天的分享就到这里，如若文中有什么纰漏或者错误欢迎大家批评指正！
欢迎大家关注微信公众号 : 前端牧码人
----------------------------------------------学前端，做快乐牧码人--------------------------------------------------------------------