JaneChelle | Blog

  之前对这 scollHeight/scrollWidth、scrollTop、scrollLeft、offsetTop、offsetLeft、offsetWidth/offsetHeight 这几个 DOM 属性总是看一遍忘一遍，今天准备下定决心把他们细分一下，脱离苦海

1、scollHeight(同scrollWidth)

• scollHeight: 此属性返回元素的 内容高度 ，返回值是一个整数，默认单位是像素，只读属性。

  内容高度 :即height+padding-top+padding-bottom

• scrollWidth 也是“内容宽度”，width+padding-left+padding-right，不包含垂直滚动条（如果有的话）的宽度

2、scrollTop

  scrollTop：可以返回或设置元素内容向上滚动的尺寸，可读可写特别说明：设置或返回的值是纯数字，不能带有单位，默认是像素。

图中箭头指向的部分的尺寸，并不是真正滚动的尺寸，它只滚动的一个标识而已。
详解请看：https://www.softwhy.com/article-9809-1.html

3、scrollLeft

  scrollLeft：属性可以设置或者返回元素内容向左滚动的尺寸。也就是说被元素所遮挡的尺寸，或者说滚动条向右滚动的距离。此属性相当有用，比如可以用来制作水平无缝滚动效果。

4、offsetTop

首先从名称入手，offsetTop 由如下两个单词构成：

（1）.offset：具有偏移量的意思。

（2）.top：具有顶部的意思。

此属性的功能确实名副其实，它返回当前元素顶部相对指定元素顶部的偏移量，只读

这个指定元素由当前元素的 offsetParent 属性确定。

offsetParent 属性返回值简单介绍如下：

（1）.返回距离当前元素最近的采用定位祖先元素。

（2）.如果祖先元素中没有采用定位的元素，则返回 body 元素。

IE7 浏览器中，offsetParent 返回值是距离它最近的父元素，有兼容需求的注意一下。

offsetTop=(自身.margin-top)+(父元素.margin-top)+(body.padding-top)+(body.margin-top)

5、offsetLeft

offsetLeft 属性返回元素左侧距离参照元素左边界偏移量。

offsetLeft 的返回值就是 自身 元素左侧距离 body 左边界的尺寸：

body 的左外边距 + body 的左内边距 + 父元素 的左外边距

具体和offsetTop雷同，不详述。

6、offsetParent

offsetParent 可以返回一个元素对象，只读属性。

根据上下文条件的不同，返回的元素也会不同，区分如下：

（1）.如果祖先元素中具有定位元素，此属性返回距离它最近的定位元素。

（2）.如果祖先元素中没有定位元素，那么返回最近的 table、td、th 或者 body 元素。

此属性通常与 offsetTop 与 offsetLeft 属性配合使用。

7. offsetWidth（同offsetHeight）

offsetWidth 属性可以返回元素的偏移宽度，只读属性，不能赋值。

无需纠结为什么称作偏移宽度，当然是有原因的，可能越讨论越混乱。

我们只需要知道此宽度由哪些要素构成即可

红线之间的尺寸，就是 offsetWidth 属性的返回值，下面分析一下返回值的具体构成：

（1）.包含元素的宽度，这个宽度是 CSS 的 width 属性指定的值。

（2）.包含左右内边距的尺寸。

（3）.不包含左右外边距的尺寸。

（4）.包括左侧垂直滚动条的宽度。

即：width + border-left + border-right + padding-left + padding-right。

8、clientWidth

此属性可以返回指定元素客户区宽度，单位默认是像素。

客户区宽度 = width + padding-left + padding-right

只读，不能进行赋值

clientHeight与clientWidth雷同

如果想详细了解，推荐大家看这个：https://www.softwhy.com/article-9809-1.html，讲的很详细的😊🤗