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

我就是我 2021-07-26 14:09 699阅读 0赞

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

### 文章目录 ###

*   *  【零代码】4张图彻底搞清楚offsetWidth，clientWidth，offsetLeft，clientLeft，offsetX，clientX，scrollLeft，scrollWidth
     *   \*\*ES5-ES9碎片知识整理\*\*
     *   *   clientWidth 和 offsetWidth
         *   *   *  图中蓝色部分表示元素的边框，根据图示结合盒子模型很容易得出以下结论：
     *  我求元素内部宽，margin和我无相关； 自身宽度到padding，偏置带框比我宽
     *   *   *   *  知识扩展
         *   clientLeft 和 offsetLeft
         *   *   *  图中蓝色部分表示元素的边框，绿色边框表示body元素或者是设置定位属性的父辈元素，根据图示结合盒子模型很容易得出以下结论：
     *   \*\*此处绿色框线需要分两种情况讨论\*\*
     *  自身左边是边框，偏置直达定位父； 没有父辈被定位，body margin算在内
     *   *   clientX 和 offsetX
         *   *   *  图中蓝色部分表示元素的边框，绿色边框表示浏览器有效区域，根据图示很容易得出以下结论：
         *   scrollLeft 和 scrollWidth
         *   *   *   今天的分享就到这里，如若文中有什么纰漏或者错误欢迎大家批评指正！
     *  欢迎大家关注微信公众号 : 前端牧码人
     *  在这里插入图片描述

--------------------

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

![在这里插入图片描述][20130619125724734_pic_center]

--------------------

###  clientWidth 和 offsetWidth ###

*  **先开图，再分析**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MDk3Mw_size_16_color_FFFFFF_t_70_pic_center]

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

1.   clientWidth = width + padding\*2 (内边距指左右内边距)
2.   offsetWidth = width + padding*2 + border*2 （边框至左右边框）
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 ###

1.  **先开图，再分析**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MDk3Mw_size_16_color_FFFFFF_t_70_pic_center 1]

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

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

> ## **此处绿色框线需要分两种情况讨论** ##
> 
>  1. 当前元素的所有父辈元素没有设置定位：此时offsetLeft指的是当前元素外边框到body元素边缘的距离（包含body的边框和内外边距）  
> 2.当前元素的父辈有设置定位如绝对定位，绿色框表示定位父元素的内边框。（不含定位元素的边框和margin）

可记作：

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

--------------------

###  clientX 和 offsetX ###

*  **先开图，再分析**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MDk3Mw_size_16_color_FFFFFF_t_70_pic_center 2]  
    clientX与offsetX用于描述鼠标点击的位置，因此在分析这两个属性之前，先要给元素设置一个`click`事件。图中蓝点表示鼠标点击的位置。

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

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

###  scrollLeft 和 scrollWidth ###

*  **先开图，再分析**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MDk3Mw_size_16_color_FFFFFF_t_70_pic_center 3]  
    为了分析scrollLeft 和scrollWidth之间的区别，特意将亮蓝色所示元素设置为可滚动区域。由于此处不好标注故没在图中具体说明。具体解释如下

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

--------------------

（完）

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

> ## 欢迎大家关注微信公众号 : 前端牧码人 ##
> 
> ## ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MDk3Mw_size_8_color_FFFFFF_t_70_pic_center] ##
> 
> \----------------------------------------------学前端，做快乐牧码人--------------------------------------------------------------------

[20130619125724734_pic_center]: /images/20210726/10c7b418eaa34f4aa70c2ba910c8e1a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MDk3Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20210726/cbe657528a0d4546bc32900963737bda.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MDk3Mw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210726/1aff7ecae30b45a8a701e5a065f75735.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MDk3Mw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210726/5a8bdc30dae542e7a8b23e59abcb024f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MDk3Mw_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210726/c867bf11a6b84fb6b1d8d14683e359f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MDk3Mw_size_8_color_FFFFFF_t_70_pic_center]: /images/20210726/89508a91257a431286f48e6916b1522e.png