Js中 關於top、clientTop、scrollTop、offsetTop

轉載自http://www.cnblogs.com/seven_...
網頁可見區域寬： document.body.clientWidth;
網頁可見區域高： document.body.clientHeight;
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬);
網頁可見區域高： document.body.offsetHeight (包括邊線的寬);
網頁正文全文寬： document.body.scrollWidth;
網頁正文全文高： document.body.scrollHeight;
網頁被捲去的高： document.body.scrollTop;
網頁被捲去的左： document.body.scrollLeft;
網頁正文部分上： window.screenTop;
網頁正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的寬： window.screen.width;
屏幕可用工做區高度： window.screen.availHeight;
屏幕可用工做區寬度：window.screen.availWidth;

一、offsetLeft

假設 obj 爲某個 HTML 控件。

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

obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。

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

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

咱們對前面提到的「上方或上層」與「左方或上層」控件做個說明。

例如：

<div id="tool">
<input type="button" value="提交">
<input type="button" value="重置">
</div>

「提交」按鈕的 offsetTop 指「提交」按鈕距「tool」層上邊框的距離，由於距其上邊最近的是 「tool」 層的上邊框。
「重置」按鈕的 offsetTop 指「重置」按鈕距「tool」層上邊框的距離，由於距其上邊最近的是 「tool」 層的上邊框。

「提交」按鈕的 offsetLeft 指「提交」按鈕距「tool」層左邊框的距離，由於距其左邊最近的是 「tool」 層的左邊框。
「重置」按鈕的 offsetLeft 指「重置」按鈕距「提交」按鈕右邊框的距離，由於距其左邊最近的是「提交」按鈕的右邊框。

以上屬性在 FireFox 中也有效。

另外：咱們這裏所說的是指 HTML 控件的屬性值，並非 document.body，document.body 的值在不一樣瀏覽器中有不一樣解釋（實際上大多數環境是因爲對 document.body 解釋不一樣形成的，並非因爲對 offset 解釋不一樣形成的），點擊這裏查看不一樣點。
標題：offsetTop 與 style.top 的區別

預備知識：offsetTop、offsetLeft、offsetWidth、offsetHeight

咱們知道 offsetTop 能夠得到 HTML 元素距離上方或外層元素的位置，style.top 也是能夠的，兩者的區別是：

1、offsetTop 返回的是數字，而 style.top 返回的是字符串，除了數字外還帶有單位：px。

2、offsetTop 只讀，而 style.top 可讀寫。

3、若是沒有給 HTML 元素指定過 top 樣式，則 style.top 返回的是空字符串。

offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是一樣道理。
標題：clientHeight、offsetHeight和scrollHeight

咱們這裏說說四種瀏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋，這裏說的是 document.body，若是是 HTML 控件，則又有不一樣，點擊這裏查看。

這四種瀏覽器分別爲IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

二、clientHeight

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 中則不是如上解釋的。其它瀏覽器則不存在此問題。
標題：scrollTop、scrollLeft、scrollWidth、scrollHeight

三、scrollLeft
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，因此內層元素會向上卷。

scrollLeft 也是相似道理。

咱們已經知道 offsetHeight 是自身元素的寬度。

而 scrollHeight 是內部元素的絕對寬度，包含內部元素的隱藏的部分。

上述中 p 的 scrollHeight 爲 300，而 p 的 offsetHeight 爲 100。

scrollWidth 也是相似道理。

IE 和 FireFox 全面支持，而 Netscape 和 Opera 不支持 scrollTop、scrollLeft（document.body 除外）。
發表時間：2007-10-15 20:20:16
標題：offsetTop、offsetLeft、offsetWidth、offsetHeight

四、clientLeft

返回對象的offsetLeft屬性值和到當前窗口左邊的真實值之間的距離，能夠理解爲邊框的長度

一直以來對offsetLeft，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時則不會有問題.
利用這個屬性，能夠獲得當前對象在不一樣大小的頁面中的絕對位置．
獲得絕對位置腳本代碼

function GetPosition(obj)
{
 var left = 0;
 var top   = 0;

 while(obj != document.body)
 {
       left = obj.offsetLeft;
        top   = obj.offsetTop;

        obj = obj.offsetParent;
 }

 alert("Left Is : " + left + "\r\n" + "Top   Is : " + top);
}

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 來啓用不一樣的解釋器。下載或瀏覽測試文件。