clientHeight与clientTop
- clientHeight
包括
padding但不包括border、水平滚动条、margin的元素的高度。对于行内元素这个属性一直是0。单位为px，只读元素。
- clientTop
元素顶部边框的宽度单位为px，可以理解为
border-top。如没有设置 border-top的值，则 element.clientTop 的值为 0
注意如下情况：
?
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>clientHeight</title> <style> div#ct { width: 250px; height: 250px; border: 15px solid blue; text-align: center; background-color: pink; margin: 100px; padding: 20px; overflow: scroll; } div#item { color: red; background-color: #666; width: 400px; height: 1000px; } </style></head><body> <div id="ct"> <div id="item">Helo World!</div></div></body></html>
clientHeight 字面意思即为自身的高度, 在上例 容器内部的子元素的高度 高于父容器，因为 overflow: scroll;所以出现滚动条。但元素本身的clientHeight 是不受这些因素影响的(
这一点容易点混淆)。所以div#ct.cilentHeight 与div#item.clientHeight还是开始设置样式是的值。
Element.getBoundingClientRect()
返回元素的大小及其『相对于视口左上角(其中width height不是相对于左上角)』的位置(
且结果会保留小数比clientHeight精确)。
element.getBoundingClientRect()包括 top right bottom left height width
- top right bottom left: 相对于视口左上角的原点位置，不包括 margin 的值，但是会包括滚动条
- height width: height 矩形盒子的高度。 width矩形盒子的宽度， 且存在
width = right - leftheight = bottom - top
scrolltHeight与scrollTop
- scrollHeight
等于在没有垂直滚动条 的情况下，为所需要填充内容视图的最小值，包括padding(
无论可见还是不可见)。 其元素的本身(而不是它的父容器)的 clientHeight 等于 scrollHeight
- scrollTop
元素的顶部到视口可见内容的顶部 的距离的度量，前提是这个元素的本身有垂直滚动条，否则 scrollTop的值为 0
注： 如果垂直方向的scrolllBar存在，且当前元素滚动到底:
element.scrollHeight - element.scrollTop === element.clientHeight// trueoffsetHeight与offsetTop
- offsetHeight(
高度偏移)
元素CSS高度的衡量标准，包括 border padding 还包括 水平方向上的 scrollBar。不包括伪元素的高度
offsetHeight = content + padding + border + 水平方向的scrollBar
- offsetTop(
顶部偏移)
当前元素相对于其 当前最接近的父辈元素的顶部内边距的距离。
也就是当前元素的 border-top(不包括border的值) 到 最接近的 父元素的margin-top边缘的距离
JQuery中的 innerHeight与outerHeight
详情如图所示
参考：
stack overflow-What is offsetHeight, clientHeight, scrollHeight?
medium-Difference between offsetHeight, clientHeight and scrollHeight
版权声明：本文为博主原创文章，未经博主许可不得转载
原著是一个有趣的人,若有侵权,请通知删除
复制或转载请以超链接形式注明转自起风了，原文地址《弄清楚烦人的clientHeight与clientTop、scrollHeight与scrollTop、offsetHeight与offsetTop与JQuery中的innerHeight()与…》
还没有人抢沙发呢~