1. offsetTop、offsetLeft、offsetWidth、offsetHeight
假設 obj 爲某個 HTML 控件。
obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。
obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。
obj.offsetWidth 指 obj 控件自身的寬度，整型，單位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。
我們對前面提到的“上方或上層”與“左方或上層”控件作個說明。
例如：
“提交”按鈕的 offsetTop 指“提交”按鈕距“tool”層上邊框的距離，因爲距其上邊最近的是 “tool” 層的上邊框。
“重置”按鈕的 offsetTop 指“重置”按鈕距“tool”層上邊框的距離，因爲距其上邊最近的是 “tool” 層的上邊框。
“提交”按鈕的 offsetLeft 指“提交”按鈕距“tool”層左邊框的距離，因爲距其左邊最近的是 “tool” 層的左邊框。
“重置”按鈕的 offsetLeft 指“重置”按鈕距“提交”按鈕右邊框的距離，因爲距其左邊最近的是“提交”按鈕的右邊框。
2.
scrollTop 是“卷”起來的高度值，示例：
<!--div style="width:100px;height:100px;background-color:#FF0000;overflow:hidden;" id="p"><br />< div style="width:50px;height:300px;background-color:#0000FF;" id="t">如果爲 p 設置了 scrollTop，這些內容可能不會完全顯示。</div><br /></div><br />< script type="text/javascript"><br /> var p = document.getElementById("p");<br /> p.scrollTop = 10;<br /></script-->
<script type="text/javascript">
var p = document.getElementById("p");
p.scrollTop = 10;
</script>
由於爲外層元素 p 設置了 scrollTop，所以內層元素會向上卷。
scrollLeft 也是類似道理。
我們已經知道 offsetHeight 是自身元素的寬度。
而 scrollHeight 是內部元素的絕對寬度，包含內部元素的隱藏的部分。
上述中 p 的 scrollHeight 爲 300，而 p 的 offsetHeight 爲 100。
scrollWidth 也是類似道理。
3.
我們這裏說說四種瀏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋，這裏說的是 document.body，如果是 HTML 控件，則又有不同，點擊這裏查看。
這四種瀏覽器分別爲IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。
clientHeight
大家對 clientHeight 都沒有什麼異議，都認爲是內容可視區域的高度，也就是說頁面瀏覽器中可以看到內容的這個區域的高度，一般是最後一個工具條以下到狀態欄以上的這個區域，與頁面內容無關。
offsetHeight
IE、Opera 認爲 offsetHeight = clientHeight + 滾動條 + 邊框。
NS、FF 認爲 offsetHeight 是網頁內容實際高度，可以小於 clientHeight。
scrollHeight
IE、Opera 認爲 scrollHeight 是網頁內容實際高度，可以小於 clientHeight。
NS、FF 認爲 scrollHeight 是網頁內容高度，不過最小值是 clientHeight。
簡單地說
clientHeight 就是透過瀏覽器看內容的這個區域高度。
NS、FF 認爲 offsetHeight 和 scrollHeight 都是網頁內容高度，只不過當網頁內容高度小於等於 clientHeight 時，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小於 clientHeight。
IE、Opera 認爲 offsetHeight 是可視區域 clientHeight 滾動條加邊框。scrollHeight 則是網頁內容實際高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同，只是把高度換成寬度即可。
但是
FF 在不同的 DOCTYPE 中對 clientHeight 的解釋不同， xhtml 1 trasitional 中則不是如上解釋的。其它瀏覽器則不存在此問題。
<!--div id="tool"><br /> < input type="button" value="提交"><br /> < input type="button" value="重置"><br /></div-->
補充：
scrollHeight: 獲取對象的滾動高度。
scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對於版面或由父座標 offsetParent 屬性指定的父座標的高度
offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置
offsetTop:獲取對象相對於版面或由 offsetTop 屬性指定的父座標的計算頂端位置
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
event.offsetX 相對容器的水平座標
event.offsetY 相對容器的垂直座標
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量
以上主要指IE之中，FireFox差異如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)
本文轉自
http://blog.163.com/chuan_zheng/blog/static/85647872007112103123753/