Html 元素的 座標體系 增加對clientLeft的說明

1.   offsetTop、offsetLeft、offsetWidth、offsetHeight

假設 obj 為某個 HTML 控制項。

obj.offsetTop 指 obj 距離上方或上層控制項的位置，整型，單位像素。

obj.offsetLeft 指 obj 距離左方或上層控制項的位置(具體為從obj的外側邊界到外層控制項的內側邊界)，整型，單位像素。（注意：以上是IE中的解釋，FF下，它是obj的外側邊界到瀏覽器左側的距離。offsetTop也是一樣）

obj.offsetWidth 指 obj 控制項自身的寬度，整型，單位像素。

obj.offsetHeight 指 obj 控制項自身的高度，整型，單位像素。

我們對前面提到的“上方或上層”與“左方或上層”控制項作個說明。

例如：
“提交”按鈕的 offsetTop 指“提交”按鈕距“tool”層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。
“重設”按鈕的 offsetTop 指“重設”按鈕距“tool”層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。

“提交”按鈕的 offsetLeft 指“提交”按鈕距“tool”層左邊框的距離，因為距其左邊最近的是 “tool” 層的左邊框。
“重設”按鈕的 offsetLeft 指“重設”按鈕距“提交”按鈕右邊框的距離，因為距其左邊最近的是“提交”按鈕的右邊框。

補充：clientLeft。FF不支援元素的此屬性，在IE下標準的解釋是：Retrieves the distance between the offsetLeft property and the true left side of the client area。關鍵是理解兩點，一個是offsetLeft property，一個是client area。先說client area，它應該是指盒模型中除去margin和border所剩下的地區，也就是border以內的地區（包括padding）。而offsetLeft property 指的是從元素border外側到其父元素border內側的距離。因此，clientLeft在通常情況下都等於元素的左邊的border寬度。

實驗：

<div style="background-color:red;border-left: 15px solid blue;padding-left:8px;margin-left:12px;height: 100px;width:100px;" id="test">
    <div id="inner" style="border-left:5px solid green;background-color:yellow;height:30px;width:30px;margin:10px">
    </div>
</div>

 

 

 

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均無關)