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
// true
offsetHeight与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
版权声明：本文为博主原创文章，未经博主许可不得转载
