clientHeight與clientTop
- clientHeight
包括
padding但不包括border、水平滾動(dòng)條、margin的元素的高度。對(duì)于行內(nèi)元素這個(gè)屬性一直是0。單位為px，只讀元素。
- clientTop
元素頂部邊框的寬度單位為px，可以理解為
border-top。如沒有設(shè)置 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 字面意思即為自身的高度, 在上例 容器內(nèi)部的子元素的高度 高于父容器，因?yàn)?overflow: scroll;所以出現(xiàn)滾動(dòng)條。但元素本身的clientHeight 是不受這些因素影響的(
這一點(diǎn)容易點(diǎn)混淆)。所以div#ct.cilentHeight 與div#item.clientHeight還是開始設(shè)置樣式是的值。
Element.getBoundingClientRect()
返回元素的大小及其『相對(duì)于視口左上角(其中width height不是相對(duì)于左上角)』的位置(
且結(jié)果會(huì)保留小數(shù)比clientHeight精確)。
element.getBoundingClientRect()包括 top right bottom left height width
- top right bottom left: 相對(duì)于視口左上角的原點(diǎn)位置，不包括 margin 的值，但是會(huì)包括滾動(dòng)條
- height width: height 矩形盒子的高度。 width矩形盒子的寬度， 且存在
width = right - leftheight = bottom - top
scrolltHeight與scrollTop
- scrollHeight
等于在沒有垂直滾動(dòng)條 的情況下，為所需要填充內(nèi)容視圖的最小值，包括padding(
無論可見還是不可見)。 其元素的本身(而不是它的父容器)的 clientHeight 等于 scrollHeight
- scrollTop
元素的頂部到視口可見內(nèi)容的頂部 的距離的度量，前提是這個(gè)元素的本身有垂直滾動(dòng)條，否則 scrollTop的值為 0
注： 如果垂直方向的scrolllBar存在，且當(dāng)前元素滾動(dòng)到底:
element.scrollHeight - element.scrollTop === element.clientHeight
// true
offsetHeight與offsetTop
- offsetHeight(
高度偏移)
元素CSS高度的衡量標(biāo)準(zhǔn)，包括 border padding 還包括 水平方向上的 scrollBar。不包括偽元素的高度
offsetHeight = content + padding + border + 水平方向的scrollBar
- offsetTop(
頂部偏移)
當(dāng)前元素相對(duì)于其 當(dāng)前最接近的父輩元素的頂部?jī)?nèi)邊距的距離。
也就是當(dāng)前元素的 border-top(不包括border的值) 到 最接近的 父元素的margin-top邊緣的距離
JQuery中的 innerHeight與outerHeight
詳情如圖所示
參考：
stack overflow-What is offsetHeight, clientHeight, scrollHeight?
medium-Difference between offsetHeight, clientHeight and scrollHeight
版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主許可不得轉(zhuǎn)載
