JS中的offsetLeft和clientLeft和scrollLeft的一些區別

在這裏插入圖片描述假設 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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章