offsetLet,offsetTop,scrollLeft,scrollTop幾個方法的理解

對offsetLet,offsetTop,scrollLeft,scrollTop幾個方法的理解

1.offsetTop     :
當前對象到其上級層頂部的距離.
不能對其進行賦值.設定對象到頁面頂部的距離請用style.top屬性.

2.offsetLeft    :
當前對象到其上級層左邊的距離.
不能對其進行賦值.設定對象到頁面左部的距離請用style.left屬性.

3.offsetWidth   :
當前對象的寬度.
與style.width屬性的區別在於:如對象的寬度設定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值

4.offsetHeight :
與style.height屬性的區別在於:如對象的寬度設定值為百分比高度,則無論頁面變大還是變小,style.height都返回此百分比,而offsetHeight則返回在不同頁面中對象的高度值而不是百分比值

5.offsetParent  :
當前對象的上級層對象.
注意.如果對象是包括在一個DIV中時,此DIV不會被當做是此對象的上級層,(即對象的上級層會跳過DIV對象)上級層是Table時則不會有問題.
利用這個屬性，可以得到當前對象在不同大小的頁面中的絕對位置．

得到絕對位置指令碼代碼
 1function GetPosition(obj)
 2{
 3    var left = 0;
 4    var top  = 0;
 5
 6    while(obj != document.body)
 7    {
 8        left = obj.offsetLeft;
 9        top  = obj.offsetTop;
10
11        obj = obj.offsetParent;
12    }
13
14    alert("Left Is : " + left + "/r/n" + "Top  Is : " + top);
15}

6.scrollLeft    :
對象的最左邊到對象在當前視窗顯示的範圍內的左邊的距離．
即是在出現了橫向捲軸的情況下，捲軸拉動的距離．

7.scrollTop
對象的最頂部到對象在當前視窗顯示的範圍內的頂邊的距離．
即是在出現了縱向捲軸的情況下，捲軸拉動的距離．

 
我們這裡說說四種瀏覽器對 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 的解釋與上面相同，只是把高度換成寬度即可。

說明
以上基於 DTD HTML 4.01 Transitional，如果是 DTD XHTML 1.0 Transitional 則意義又會不同，在 XHTML 中這三個值都是同一個值，都表示內容的實際高度。新版本的瀏覽器大多支援根據頁面指定的 DOCTYPE 來啟用不同的解譯器。下載或瀏覽測試檔案。

 

本文來自CSDN部落格，轉載請標明出處：http://blog.csdn.net/endall/archive/2008/02/06/2085218.aspx