JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解（含示例图）

MDN文档

首先：每个HTML元素都具有clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop 这5个和元素高度、滚动、位置相关的属性。

clientHeight和offsetHeight属性表示元素的高度，和元素的滚动、位置没有关系。

返回值未因浏览器区别存在差异的属性：

clientHeight、clientWidth、

offsetHeight、offsetWidth、offsetTop、offsetLeft、offsetRight、offsetBottom、

返回值是number类型的属性：

clientHeight、clientWidth、

offsetHeight、offsetWidth、offsetTop、offsetLeft、offsetRight、offsetBottom、

注：number类型的返回值是经过四舍五入之后的值，即如果实际的值是400.2，得到的最终结果是400而不是400.2，如果实际的值是400.6，得到的最终结果是400而不是401。如果要获取实际大小而非四舍五入之后的值，可以用getBoundingClientRect来获取，MDN文档链接getBoundingClientRect

返回值是string类型的属性，即带px：

 

详解：

参考的文章是这里，参考的这篇文章大部分没问题，但存在些小问题，所以自己还是打算完整的写一篇。

先上神图（注：图的部分属性的标注并未考虑到浏览器之间的差异性，以及相关值获取到的前提条件，描述的不够准确和完整，需要配合文字结合起来理解）：

 

offsetTop

offsetTop是原生JS的方法，它获取的是你绑定元素上边框相对离自己最近且position属性为非static的祖先元素的偏移量。参考的文章在这里。其它的offsetLeft、offsetRight、offsetBottom同理。

关键词：（参考的对象是）祖先（不一定是父元素，一直往上找）元素、离自己最近、position不为static（static是position的默认值，如果一个元素不设置position，默认是static定位，因此offsetTop所参考的对象的position必须是relative，absolute，fixed中的一个）

返回值类型：number，不带px单位

 

offsetHeight

offsetHeight：获取目标元素的自身高度，包括padding、border、水平滚动条的高度，但不包括margin的元素的高度。对于inline的元素（即行内元素）这个属性一直是0，单位px（注：返回值是不带px单位，类型为number）只读元素。

HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。通常，元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。

对于文档的body对象，它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。 

如果元素被隐藏（例如 元素或者元素的祖先之一的元素的style.display被设置为none），则返回0

参考文章在这里。offsetWidth相关在这里。

关键词：padding、border、水平滚动条的高度

返回值类型：number，不带px单位

浏览器差异：无

由于之前有文章说该属性的返回值在不同浏览器间返回值有差异，特地实测：ie9/10/11、chrome、Firefox返回值一致，并无差异。

clientHeight

目标元素的内容可视区域的高度，包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline（行内）的元素这个属性一直是0（number类型），单位px，只读元素。参考文章在这里。

关键词：可视区域、包括padding、不包括border、水平滚动条高度、margin

返回值类型：number，不带px单位

浏览器差异：无