温故知新（六七）说下 offsetWidth 和 clientWidth、offsetHeight 和 clientHeight 的区别，说说 offsetTop，offsetLeft，scrollW

说下 offsetWidth 和 clientWidth、offsetHeight 和 clientHeight 的区别，说说 offsetTop，offsetLeft，scrollWidth，scrollHeight 属性作用

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

扩展

offset 相关：offsetWidth offsetHeight offsetTop offsetLeft

client 相关：clientWidth clientHeight clientTop clientLeft

scroll 相关：scrollWidth scrollHeight scrollTop scrollLeft

一、offset

offsetHeight：是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数，不包含::before 或 ::after 等伪类元素的高度，如果元素被隐藏（例如元素或者元素的祖先之一的元素的style.display被设置为 none），则返回 0

offsetWidth：同上，将高度理解为宽度即可

这两个属性的属性值会被四舍五入为整数值，如果你需要一个浮点数值，请用 element.getBoudingClientRect()

offsetLeft：为只读属性，它返回当前元素 左边框 外边缘 到最近的已定位父级（offsetParent）左边框 内边缘的距离。如果父级都没有定位，则是到 body 左边的距离

offsetTop：为只读属性，当元素 上边框 外边缘 到最近的已定位父元素（offsetParen）上边框 内边缘 的距离。如果父级都没有定位，则是到 body 顶部的距离

二、client

clientWidth：包含元素内容宽度，左右 padding

clientHeight：包含元素内容高度，上下 padding

clientTop：只读属性，上边框的宽度

clientLeft：表示一个元素的左边框的宽度，以像素表示。如果元素的文本方向是从右向左（RTL），并且由于内容溢出导致左边出现一个垂直滚动条，则该属性包括滚动条的宽度。clientLeft 不包括左外边距和左内边距。clientLeft 是只读的。

三、scroll

scrollWidth：这个只读属性是元素内容宽度的一种度量，包括由于 overflow 溢出而在屏幕上不可见的内容。

scrollWidth 值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度。 宽度的测量方式与 clientWidth 相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）。 它还可以包括伪元素的宽度，例如 ::before或 ::after。 如果元素的内容可以适合而不需要水平滚动条，则其 scrollWidth 等于 clientWidth

scrollHeight：理解同上

scrollTop：读取或设置元素内容层顶部 到 可视区域顶部的距离

scrollTop 可以被设置成任何整数，同时注意：

1.如果一个元素不能被滚动（例如他没有溢出，或者这个元素有一个 no-scrollable 属性），scrollTop 将被设置为 0

2.设置 scrollTop 的值小于0，scrollTop 被设为 0

3.如果设置了超出这个容器可滚动的值，scrollTop 会被设为最大值。

scrollLeft：读取或设置元素内容层左端 到 可视区域左端的距离。

注意如果这个元素的内容排列方向是rtl(right-top-left) ，那么滚动条会位于最右侧（内容开始处），并且scrollLeft 值为 0 。此时，当你从右到左拖动滚动条时，scrollLeft 会从 0 变为负数。