第 84 期(JavaScript-DOM):client、offset和scroll
wingmeng opened this issue · comments
client、offset 和 scroll 是确定网页元素大小的三大家族。
client
客户区大小。指的是元素内容及其内边距所占据的空间大小,不包含滚动条占用的空间。家族成员有2个:
clientWidth
元素内容区宽度 + 左 padding + 右 paddingclientHeight
元素内容区高度 + 上 padding + 下 padding
offset
偏移量。指元素在屏幕上占用的所有可见空间大小,即包含宽高、内边距、边框(注意,不包括外边距)。家族成员有4个:
offsetWidth
元素在水平方向上占用的空间大小,包括元素的宽度、(可见的)垂直滚动条宽度、左边框宽度和右边框宽度。offsetHeight
元素在垂直方向上占用的空间大小,包括元素的高度、(可见的)水平滚动条高度、上边框高度和下边框高度。offsetLeft
元素的左外边框至包含元素的左内边框之间的距离。offsetTop
元素的上外边框至包含元素的上内边框之间的距离。
注意:没有 offsetRight 和 offsetBottom 哦
scroll
滚动大小。指的是包含滚动内容的元素的大小。家族成员有4个:
scrollWidth
在没有滚动条的情况下,元素内容的总宽度。scrollHeight
在没有滚动条的情况下,元素内容的总高度。scrollLeft
左侧内容区域的隐藏距离,或着可以理解为左侧区域的滚动位置。scrollTop
上方内容区域的隐藏距离,或着可以理解为上方区域的滚动位置。
顺带提一下 getBoundingClientRect()
方法,这是一个非常实用的用以获取元素大小信息的方法,包含4个属性:left、top、right 和 bottom,分别对应元素在页面中相对于视口的位置。