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


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 相對文檔的水平座標+垂直方向滾動的量

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

 

假設 obj 為某個 HTML 控件。

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

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

例如:

“提交”按鈕的 offsetTop 指“提交”按鈕距“tool”層上邊框的間隔,因為距其上邊比來的是 “tool” 層的上邊框。

“提交”按鈕的 offsetLeft 指“提交”按鈕距“tool”層左邊框的間隔,因為距其左邊比來的是 “tool” 層的左邊框。

以上屬性在 FireFox 中也有效。

題目:offsetTop 與 style.top 的差別

我們知道 offsetTop 可以獲得 HTML 元素間隔上方或外層元素的地位,style.top 也是可以的,二者的差別是:

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

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

我們這里說說四種瀏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的申明,這里說的是 document.body,若是是 HTML 控件,則又有不合,點擊這里查看。

2、clientHeight

大師對 clientHeight 都沒有什么貳言,都認為是內容可視區域的高度,也就是說頁面瀏覽器中可以看到內容的這個區域的高度,一般是最后一個對象條以下到狀況欄以上的這個區域,與頁面內容無關。

IE、Opera 認為 offsetHeight = clientHeight + 遷移轉變條 + 邊框。

scrollHeight

NS、FF 認為 scrollHeight 是網頁內容高度,不過最小值是 clientHeight。

clientHeight 就是透過瀏覽器看內容的這個區域高度。

IE、Opera 認為 offsetHeight 是可視區域 clientHeight 遷移轉變條加邊框。scrollHeight 則是網頁內容實際高度。

clientWidth、offsetWidth 和 scrollWidth 的申明與上方雷同,只是把高度換成寬度即可。

FF 在不合的 DOCTYPE 中對 clientHeight 的申明不合, xhtml 1 trasitional 中則不是如上申明的。其它瀏覽器則不存在此題目。

3、scrollLeft

<div style="width:100px;height:100px;overflow:hidden;" id="p">

<script type="text/javascript">

p.scrollTop = 10;

因為為外層元素 p 設置了 scrollTop,所以內層元素會向上卷。

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

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

IE 和 FireFox 周全支撐,而 Netscape 和 Opera 不支撐 scrollTop、scrollLeft(document.body 除外)。

題目:offsetTop、offsetLeft、offsetWidth、offsetHeight

返回對象的offsetLeft屬性值和到當前窗口左邊的真實值之間的間隔,可以懂得為邊框的長度

1.offsetTop     :

不克不及對其進行賦值.設置對象到頁面頂部的間隔請用style.top屬性.

當前對象到其上級層左邊的間隔.

3.offsetWidth :

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

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

當前對象的上級層對象.

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

1function GetPosition(obj)

3 var left = 0;

5

7 {

9        top   = obj.offsetTop;

11        obj = obj.offsetParent;

13

6.scrollLeft :

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

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

我們這里說說四種瀏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的申明,這里說的是 document.body,若是是 HTML 控件,則又有不合,點擊這里查看。

clientHeight

offsetHeight

NS、FF 認為 offsetHeight 是網頁內容實際高度,可以小於 clientHeight。

IE、Opera 認為 scrollHeight 是網頁內容實際高度,可以小於 clientHeight。

簡單地說

NS、 FF 認為 offsetHeight 和 scrollHeight 都是網頁內容高度,只不過當網頁內容高度小於便是 clientHeight 時,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小於 clientHeight。

同理

clientWidth、offsetWidth 和 scrollWidth 的申明與上方雷同,只是把高度換成寬度即可。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM