JavaScript DOM定位属性详解：client/offset/scroll系列图解

JavaScript DOM定位属性详解

借助这张示意图，可以直观地理解相关概念。

Height系列属性解析

以下以Height属性为例进行说明，Width属性的逻辑与之相同。

div.clientHeight：表示可见窗口的高度，其计算方式是从元素总高度中减去margin（外边距）和border（边框）后的剩余长度。

div.offsetHeight：在div.clientHeight的基础上，额外增加了border（边框）以及滚动条所占的长度。

div.scrollHeight：代表元素内部内容的实际总高度，无论内容是否溢出可视区域。

Top系列属性与offsetParent

以下以Top属性为例进行说明，Left属性的逻辑与之相同。

div.clientTop：指margin（外边距）之后、padding（内边距）之前的垂直距离值，通常对应边框的厚度。

div.offsetTop：表示该元素的上边框上边缘，到其offsetParent（偏移父元素）的上边框内边缘之间的垂直距离。

div.scrollTop：指对象的最顶部到当前窗口显示范围内顶边的距离。当出现纵向滚动条时，该值等于滚动条被拉动的距离。

关于offsetParent，不同浏览器存在不同的实现算法。但在一种常见布局场景下，各浏览器的表现一致：当外层元素div的position计算值为relative或absolute时，内层元素div的offsetParent始终指向该外层元素div。