了解Scroll，Client，Offset相关属性

前言

 

1. Offset用于计算相对一个元素的偏移量
2. Client用于计算元素的内容区尺寸
3. Scroll用于计算元素的滚动区域尺寸

 

Offset 偏移量

 

offsetParent

1. 是否具有定位的祖先元素，如果有返回对应的祖先元素

2. 如果没有，那么返回最近的table、td、th或者body元素。

 

offsetLeft

相对offsetParent的左偏移量

合成公式：

offsetLeft = offsetParent["margin-left"] + offsetParent["padding-left"] + 元素本身的包括所有祖先元素的左外边距

 

offsetTop

相对offsetParent的上偏移量

合成公式：

offsetTop = offsetParent["margin-top"] + offsetParent["padding-top"] + 元素本身的包括所有祖先元素的上外边距

 

offsetWidth

元素本身的偏移宽度

合成公式：

offsetWidth = DOM["width"] + DOM["padding-left"] + DOM["padding-right"] + y轴滚动条的宽度 + 左右边框的厚度

 

offsetHeight

元素本身的偏移高度

合成公式：

offsetHeight = DOM["height"] + DOM["padding-top"] + DOM["padding-bottom"] + x轴滚动条的宽度 + 上下边框的厚度

 

Client 可见内容区尺寸

 

clientLeft

内容区左边框的厚度

clientTop

内容区上边框的厚度

与borderLeftWidth或者borderTopWidth比较

• clientLeft是只读属性，而borderLeftWidth是可读写属性。
• clientLeft的返回值是一个数字，而borderLeftWidth的返回值是一个字符串，带有单位。
• clientLeft的返回值会对小数进行四舍五入处理并返回整数，borderLeftWidth属性会返回精确的数。
• 当元素设置display:none不可见状态，那么clientLeft属性返回0，而borderLeftWidth可以返回正常值。

 

clientWidth

内容区的宽度

合成公式：

clientWidth = DOM["width"] + DOM["padding-left"] + DOM["padding-right"]

 

clientHeight

内容区的高度

合成公式：

clientHeight = DOM["height"] + DOM["padding-top"] + DOM["padding-bottom"]

 

Scroll 滚动内容区尺寸

 

scrollLeft

x轴滚动的距离

scrollTop

y轴滚动的距离

scrollWidth

无滚动条时与clientWidth 相等

有滚动条时所有内容区的宽度（包含不在视口的）

scrollHeight

无滚动条时与clientHeight 相等

有滚动条时所有内容区的高度（包含不在视口的）