javascript中top、clientTop、scrollTop、offsetTop的講解(轉載加總結)

標籤：不同   座標   position   net   支援   Null 字元串   整數   eval   根據   

 

 

 

 

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

onMouseover當滑鼠經過的時候，觸發 = 後面的指令碼函數

onMouseout 當滑鼠離開 。。

onMouseUP 當滑鼠 按下又抬起。。。

onmousemove 當滑鼠移動。。

onmousedown 當滑鼠按下時。。

假設 obj 為某個 HTML 控制項。

obj.offsetTop 指 obj 相對於版面或由 offsetParent 屬性指定的父座標的計算上側位置，整型，單位像素。

obj.offsetLeft 指 obj 相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置，整型，單位像素。

obj.offsetWidth 指 obj 控制項自身的絕對寬度，不包括因 overflow 而未顯示的部分，也就是其實際佔據的寬度，整型，單位像素。

obj.offsetHeight 指 obj 控制項自身的絕對高度，不包括因 overflow 而未顯示的部分，也就是其實際佔據的高度，整型，單位像素。

我們對前面提到的 offsetParent 作個說明。

offsetParent 擷取定義對象 offsetTop 和 offsetLeft 屬性的容器物件的引用。offsetTop 與 offsetParent 很複雜，不同瀏覽器有不同解釋，浮動一下解釋又不同了，所以我們一般只要理解通過二者可以獲得控制項在瀏覽器中的絕對位置即可。

以上屬性在 FireFox 中也有效。

另外：我們這裡所說的是指 HTML 控制項的屬性值，並不是 document.body，document.body 的值在不同瀏覽器中有不同解釋（實際上大多數環境是由於對 document.body 解釋不同造成的，並不是由於對 offset 解釋不同造成的）

我們知道 offsetTop 可以獲得 HTML 元素距離上方或外層元素的位置，style.top 也是可以的，二者的區別是：

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

二、offsetTop 唯讀，而 style.top 可讀寫。

三、如果沒有給 HTML 元素指定過 top 樣式，則 style.top 返回的是Null 字元串。

offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是同樣道理。

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 來啟用不同的解譯器

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，所以內層元素會向上卷，這捲起來的部分就是 scrollTop。

scrollLeft 也是類似道理。

我們已經知道 offsetHeight 是自身元素的寬度，而 scrollHeight 是內部元素的絕對寬度，包含內部元素的隱藏的部分。上述中 p 的 scrollHeight 為 300，而 p 的 offsetHeight 為 100。

scrollWidth 也是類似道理。

IE 和 FireFox 全面支援，而 Netscape 8 和 Opera 7.6 不支援 scrollTop、scrollLeft（document.body.scrollTop、document.body.scrollLeft 除外）。

1.clientHeight, clientWidth:

這兩個屬性大體上顯示了元素內容的象素高度和寬度.理論上說這些測量不考慮任何通過樣式表加入

元素中的頁面邊界,邊框等.

2.clientLeft,clientTop:

這兩個返回的是元素周圍邊框的厚度,如果不指定一個邊框或者不定位改元素,他的值就是0.

3.scrollLeft,scrollTop:

如果元素是可以滾動的,可以通過這倆個屬性得到元素在水平和垂直方向上滾動了多遠,單位是象素.

對於不可以滾動的元素,這些值總是0.

4.scrollHeight,scrollWidth:

不管有多少對象在頁面上可見,他們得到的是整體.

5.style.left:

定位元素與包含它的矩形左邊界的位移量

6.style.pixelLeft:

返回定位元素左邊界位移量的整數像素值.因為屬性的非像素值返回的是包含單位的字串,例如,30px. 利用這個屬性可以單獨處理以像素為單位的數值.

7.style:posLetf:

返回定位元素左邊界位移量的數量值,不管相應的樣式表元素指定什麼單位.因為屬性的非位置值返回的是包含單位的字串,例如,1.2em  

top,pixelTop,posTOp這幾個類比就行了.

LEFT:   為從左向右移的位置,即掛件距離螢幕左邊緣的距離;

clientLeft   返回對象的offsetLeft屬性值和到當前視窗左邊的真實值之間的距離

offsetLeft   返回對象相對於父級對象的布局或座標的left值，就是以父級對象左上方為座標原點，向右和向下為X、Y軸正方向的x座標

pixelLeft   設定或返回對象相對於視窗左邊的位置

scrollWidth 是對象的實際內容的寬，不包邊線寬度，會隨對象中內容的多少改變（內容多了可能會改變對象的實際寬度）。

clientWidth 是對象可見的寬度，不包捲軸等邊線，會隨視窗的顯示大小改變。

offsetWidth 是對象的可見寬度，包捲軸等邊線，會隨視窗的顯示大小改變。

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

offsetwidth:是元素相對父元素的位移寬度。等於border+padding+width

clientwidth：是元素的可見寬度。等於padding+width

scrollwidth:是元素的寬度且包括滾動部分。

offsetLeft:Html元素相對於自己的offsetParent元素的位置

scrollLeft:返回和設定當前橫向滾動務的座標值

<input type="button" value="點一下" onclick="move()">

<div id="d" style=" position:absolute; left:170px; top:100px;width:300;height:300;overflow:scroll"

onclick="alert(‘offsetLeft:‘+this.offsetLeft)">

<div style="height:600;width:600" onclick="alert(‘offsetLeft:‘+this.offsetLeft)"></div>

</div>

<script language="javascript">

function move()

{

var d=document.getElementById("d")

a=eval(20)

d.scrollLeft+=a

}

</script>

儲存為網頁，運行一下，點按鈕，捲軸移動

點擊div，先彈出b相對於a的位置，再彈出a相對於視窗的位置

 

offsetTop、offsetLeft、offsetWidth、offsetHeight

等於在湧現了縱向轉動條的情形下，轉動條拉動的間隔．

NS、FF 以為 offsetHeight 是網頁內容現實高度，可以小於 clientHeight。

FF 在分歧的 DOCTYPE 中對 clientHeight 的說明分歧， xhtml 1 trasitional 中則不是如上說明的。別的閱讀器則不存在此題目。

當前工具的寬度.

留意.假如工具是包含在一個DIV中時,此DIV不會被當作是此工具的上級層,(即工具的上級層會跳過DIV工具)上級層是Table時則不會有題目.

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

IE 和 FireFox 周全支撐，而 Netscape 和 Opera 不支撐 scrollTop、scrollLeft（document.body 除外）。

6.scrollLeft :

5.offsetParent :

網頁本文全文高： document.body.scrollHeight;

NS、FF 以為 offsetHeight 是網頁內容現實高度，可以小於 clientHeight。

offsetHeight

然則

別的：我們這裡所說的是指 HTML 控制項的屬性值，其實不是 document.body，document.body 的值在分歧閱讀器中有分歧說明（現實上年夜多半情況是因為對 document.body 說明分歧釀成的，其實不是因為對 offset 說明分歧釀成的），點擊這裡檢察分歧點。

“提交”按鈕的 offsetTop 指“提交”按鈕距“tool”層上邊框的間隔，由於距其上邊比來的是 “tool” 層的上邊框。

var top = 0;

這四種閱讀器分離為IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

scrollHeight

網頁被卷往的高： document.body.scrollTop;

當前工具的上級層工具.

我們已知道 offsetHeight 是本身元素的寬度。

我們這裡說說四種閱讀器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的說明，這裡說的是 document.body，假如是 HTML 控制項，則又有分歧，點擊這裡檢察。

2、clientHeight

以上屬性在 FireFox 中也有用。

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

top = obj.offsetTop;

複製代碼 代碼以下:

網頁可見地區寬： document.body.clientWidth;

獲得盡對地位劇本代碼

clientHeight

同理

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

同理

當前工具到其上級層左側的間隔.

與style.height屬性的差別在於:如工具的寬度設定值為百分比高度,則不管頁面變年夜照樣變小,style.height都返回此百分比,而offsetHeight則返回在分歧頁面中工具的高度值而不是百分比值

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

while(obj != document.body)

網頁本文部份左： window.screenLeft;

2.offsetLeft :

我們知道 offsetTop 可以取得 HTML 元素間隔上方或外層元素的地位，style.top 也是可以的，兩者的差別是：

這四種閱讀器分離為IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

7.scrollTop

網頁可見地區高： document.body.offsetHeight (包含邊線的寬);

年夜家對 clientHeight 都沒有甚麼貳言，都以為是內容可視地區的高度，也就是說頁面閱讀器中可以看到內容的┞封個地區的高度，一樣平常是末了一個對象條以下到狀況欄以上的┞封個地區，與頁面內容無關。

clientHeight

簡樸地說

“提交”按鈕的 offsetLeft 指“提交”按鈕距“tool”層左側框的間隔，由於距其左側比來的是 “tool” 層的左側框。

簡樸地說

螢幕分辯率的高： window.screen.height;

題目：scrollTop、scrollLeft、scrollWidth、scrollHeight

obj.offsetLeft 指 obj 間隔左方或上層控制項的地位，整型，單元像素。

IE、Opera 以為 scrollHeight 是網頁內容現實高度，可以小於 clientHeight。

1.offsetTop :

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

應用這個屬性，可以獲得當前工具在分歧年夜小的頁面中的盡對地位．

}

準備常識：offsetTop、offsetLeft、offsetWidth、offsetHeight

IE、Opera 以為 offsetHeight = clientHeight + 轉動條 + 邊框。

以上基於 DTD HTML 4.01 Transitional，假如是 DTD XHTML 1.0 Transitional 則意義又會分歧，在 XHTML 中這三個值都是統一個值，都表現內容的現實高度。新版本的閱讀器年夜多支撐依據頁面指定的 DOCTYPE 來啟用分歧的說明器。下載或閱讀測試檔案。

假如為 p 設定了 scrollTop，這些內容大概不會完整表現。

題目：offsetTop 與 style.top 的差別

假定 obj 為某個 HTML 控制項。

var left = 0;

比方：

}

3、scrollLeft

clientHeight 就是透過閱讀器看內容的┞封個地區高度。

網頁可見地區高： document.body.clientHeight;

IE、Opera 以為 offsetHeight 是可視地區 clientHeight 轉動條加邊框。scrollHeight 則是網頁內容現實高度。

螢幕可用事情區寬度：window.screen.availWidth;

題目：clientHeight、offsetHeight和scrollHeight

4.offsetHeight :

clientWidth、offsetWidth 和 scrollWidth 的說明與上面雷同，只是把高度換成寬度便可。

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

obj = obj.offsetParent;

網頁可見地區寬： document.body.offsetWidth (包含邊線的寬);

IE、Opera 以為 scrollHeight 是網頁內容現實高度，可以小於 clientHeight。

IE、Opera 以為 offsetHeight = clientHeight + 轉動條 + 邊框。

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

網頁本文全文寬： document.body.scrollWidth;

p.scrollTop = 10;

4、clientLeft

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

 

大部分轉載自：http://www.cnblogs.com/trlanfeng/archive/2012/11/04/2753280.html

javascript中top、clientTop、scrollTop、offsetTop的講解(轉載加總結)