offsetTop,offsetHeight,scrollHeight,scrollTop的區別

offsetTop,offsetHeight,scrollHeight,scrollTop，這些屬性曾經困擾了我很長很長很長時間。
今天花點功夫，徹底把他們搞清楚了。


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

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

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

scrollHeight 與 offsetHeight

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

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

<p style="background-color:red; height:250px; ">
別再做情人 做只貓 做只狗 不做情人 做只寵物至少可愛迷人 和你相交不淺無謂明日會被你憎
</p>
</div>
<script>
alert(document.getElementById("container").offsetHeight);
alert(document.getElementById("container").scrollHeight);
</script>
將依次輸出100，250。因為已經指定了元素的height為100px，所以offsetHeight始終為100px；內部元素為 250px，而容器元素只有100px，那么還有150px的內容它無法顯示出來，但它卻是實際存在的，所以scrollHeight值為 100+150=250。

轉載的