JS中offsetTop、clientTop、scrollTop、offsetTop各屬性介紹

這裏是javascript中製做滾動代碼的經常使用屬性

頁可見區域寬： 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;

一、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 能夠得到 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

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;overflow:hidden;" id="p">

<div style="width:50px;height:300px;" 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 除外）。

四、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 的解釋與上面相同，只是把高度換成寬度便可。