offsetTop,offsetHeight,scrollHeight,scrollTop，這些屬性曾經(jīng)困擾了我很長(zhǎng)很長(zhǎng)很長(zhǎng)時(shí)間。
今天花點(diǎn)功夫，徹底把他們搞清楚了。


假設(shè) obj 為某個(gè) HTML 控件。
obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。

offsetTop?可以獲得 HTML 元素距離上方或外層元素的位置，style.top 也是可以的，二者的區(qū)別是：
一、offsetTop 返回的是數(shù)字，而 style.top 返回的是字符串，除了數(shù)字外還帶有單位：px。
二、offsetTop 只讀，而 style.top 可讀寫。
三、如果沒(méi)有給 HTML 元素指定過(guò) top 樣式，則 style.top 返回的是空字符串。

scrollTop?是“卷”起來(lái)的高度值，示例：
<div style="width:100px;height:100px;overflow:hidden;" id="p">
　　<div style="width:50px;height:300px;" id="t">如果為 p 設(shè)置了 scrollTop，這些內(nèi)容可能不會(huì)完全顯示。</div>
</div>
<script type="text/javascript">
　　var p = document.getElementById("p");
　　p.scrollTop = 10;
</script>
由于為外層元素 p 設(shè)置了 scrollTop，所以內(nèi)層元素會(huì)向上卷。

scrollHeight 與 offsetHeight

offsetHeight是自身元素的高度，scrollHeight是?自身元素的高度+隱藏元素的高度(是不是可以理解成內(nèi)層元素的offsetHeight值？？？)。

<div id="container" style=" width:100px; height:100px; overflow:auto;">

　　<p style=" height:250px; "></p>

</div>
<script>
　　alert(document.getElementById("container").offsetHeight);
　　alert(document.getElementById("container").scrollHeight);
</script>
將依次輸出100，250。因?yàn)橐呀?jīng)指定了元素的height為100px，所以offsetHeight始終為100px；內(nèi)部元素為 250px，而容器元素只有100px，那么還有150px的內(nèi)容它無(wú)法顯示出來(lái)，但它卻是實(shí)際存在的，所以scrollHeight值100+150=250。

轉(zhuǎn)載于:https://www.cnblogs.com/wuwenjie/p/5580442.html

總結(jié)

以上是生活随笔為你收集整理的offsetTop,offsetHeight,scrollHeight,scrollTop的区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。