JS中offsetLeft,Left,clientLeft的區別(純轉貼)


假設 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 返回的是空字符串。

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 是“卷”起來的高度值,示例:


    
    如果為 p 設置了 scrollTop,這些內容可能不會完全顯示。
    


var p = document.getElementByIdx_x("p");
p.scrollTop = 10;

由於為外層元素 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 除外)。

scrollHeight: 獲取對象的滾動高度。 
scrollLeft: 設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離 scrollLeft屬性與scrollTop屬性的作用相同,兩者的區別在於 scrollTop是獲取滾動條向下拉動的值,而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


免責聲明!

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



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