第 84 期(JavaScript-DOM)：client、offset和scroll

[wingmeng]

client、offset 和 scroll 是确定网页元素大小的三大家族。

1. client 客户区大小。指的是元素内容及其内边距所占据的空间大小，不包含滚动条占用的空间。家族成员有2个：

• clientWidth 元素内容区宽度 + 左 padding + 右 padding
• clientHeight 元素内容区高度 + 上 padding + 下 padding

2. offset 偏移量。指元素在屏幕上占用的所有可见空间大小，即包含宽高、内边距、边框（注意，不包括外边距）。家族成员有4个：

• offsetWidth 元素在水平方向上占用的空间大小，包括元素的宽度、（可见的）垂直滚动条宽度、左边框宽度和右边框宽度。
• offsetHeight 元素在垂直方向上占用的空间大小，包括元素的高度、（可见的）水平滚动条高度、上边框高度和下边框高度。
• offsetLeft 元素的左外边框至包含元素的左内边框之间的距离。
• offsetTop 元素的上外边框至包含元素的上内边框之间的距离。

注意：没有 offsetRight 和 offsetBottom 哦

3. scroll 滚动大小。指的是包含滚动内容的元素的大小。家族成员有4个：

• scrollWidth 在没有滚动条的情况下，元素内容的总宽度。
• scrollHeight 在没有滚动条的情况下，元素内容的总高度。
• scrollLeft 左侧内容区域的隐藏距离，或着可以理解为左侧区域的滚动位置。
• scrollTop 上方内容区域的隐藏距离，或着可以理解为上方区域的滚动位置。

顺带提一下 getBoundingClientRect() 方法，这是一个非常实用的用以获取元素大小信息的方法，包含4个属性：left、top、right 和 bottom，分别对应元素在页面中相对于视口的位置。