當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

转 html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

發布時間：2025/3/15 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了转 html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth?
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 相對文檔的水平座標+垂直方向滾動的量

這里是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;

1、offsetLeft

假設 obj 為某個 HTML 控件。

obj.offsetTop 指 obj 間隔上方或上層控件的地位，整型，單位像素。

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

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

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

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

例如：

</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 也是可以的，二者的差別是：

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

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

三、若是沒有給 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）。

2、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

3、scrollLeft

scrollTop 是“卷”起來的高度值，示例：

<div style="width:50px;height:300px;" id="t">若是為 p 設置了 scrollTop，這些內容可能不會完全顯示。</div>

</div>

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

4、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時則不會有題目.

哄騙這個屬性，可以獲得當前對象在不合大小的頁面中的絕對地位．

獲得絕對地位腳本代碼

1function GetPosition（obj）

3 var left = 0;

4 var top?? = 0;

6 while（obj != document.body）

7 {

8??????? left = obj.offsetLeft;

9??????? top?? = obj.offsetTop;

11??????? obj = obj.offsetParent;

12 }

14 alert（"Left Is : " + left + "\r\n" + "Top?? Is : " + top）;

15}

6.scrollLeft :

對象的最左邊到對象在當前窗口顯示的局限內的左邊的間隔．

便是在呈現了橫向遷移轉變條的景象下，遷移轉變條拉動的間隔．

7.scrollTop

對象的最頂部到對象在當前窗口顯示的局限內的頂邊的間隔．

便是在呈現了縱向遷移轉變條的景象下，遷移轉變條拉動的間隔．