假設(shè) obj 為某個 HTML 控件

obj.offsetTop 指 obj 相對于版面或由 offsetParent 屬性指定的父坐標的計算上側(cè)位置，整型，單位像素。

obj.offsetLeft 指 obj 相對于版面或由 offsetParent 屬性指定的父坐標的計算左側(cè)位置，整型，單位像素。

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

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

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

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

以上屬性在 FireFox 中也有效。

另外：我們這里所說的是指 HTML 控件的屬性值，并不是 document.body，document.body 的值在不同瀏覽器中有不同解釋（實際上大多數(shù)環(huán)境是由于對 document.body 解釋不同造成的，并不是由于對 offset 解釋不同造成的）

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

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

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

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

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

clientHeight
大家對 clientHeight 都沒有什么異議，都認為是內(nèi)容可視區(qū)域的高度，也就是說頁面瀏覽器中可以看到內(nèi)容的這個區(qū)域的高度，一般是最后一個工具條以下到狀態(tài)欄以上的這個區(qū)域，與頁面內(nèi)容無關(guān)。

offsetHeight
IE、Opera 認為 offsetHeight = clientHeight + 滾動條 + 邊框。
NS、FF 認為 offsetHeight 是網(wǎng)頁內(nèi)容實際高度，可以小于 clientHeight。

scrollHeight
IE、Opera 認為 scrollHeight 是網(wǎng)頁內(nèi)容實際高度，可以小于 clientHeight。
NS、FF 認為 scrollHeight 是網(wǎng)頁內(nèi)容高度，不過最小值是 clientHeight。

簡單地說
clientHeight 就是透過瀏覽器看內(nèi)容的這個區(qū)域高度。
NS、FF 認為 offsetHeight 和 scrollHeight 都是網(wǎng)頁內(nèi)容高度，只不過當網(wǎng)頁內(nèi)容高度小于等于 clientHeight 時，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 認為 offsetHeight 是可視區(qū)域 clientHeight 滾動條加邊框。scrollHeight 則是網(wǎng)頁內(nèi)容實際高度。

同理
clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同，只是把高度換成寬度即可。

說明
以上基于 DTD HTML 4.01 Transitional，如果是 DTD XHTML 1.0 Transitional 則意義又會不同，在 XHTML 中這三個值都是同一個值，都表示內(nèi)容的實際高度。新版本的瀏覽器大多支持根據(jù)頁面指定的 DOCTYPE 來啟用不同的解釋器

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

scrollLeft 也是類似道理。

我們已經(jīng)知道 offsetHeight 是自身元素的寬度，而 scrollHeight 是內(nèi)部元素的絕對寬度，包含內(nèi)部元素的隱藏的部分。上述中 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:
這兩個屬性大體上顯示了元素內(nèi)容的象素高度和寬度.理論上說這些測量不考慮任何通過樣式表加入
元素中的頁邊距,邊框等.

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

3.scrollLeft,scrollTop:
如果元素是可以滾動的,可以通過這倆個屬性得到元素在水平和垂直方向上滾動了多遠,單位是象素.
對于不可以滾動的元素,這些值總是0.

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

5.style.left:
定位元素與包含它的矩形左邊界的偏移量

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

7.style:posLetf:
返回定位元素左邊界偏移量的數(shù)量值,不管相應(yīng)的樣式表元素指定什么單位.因為屬性的非位置值返回的是包含單位的字符串,例如,1.2em  

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

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

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

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

pixelLeft   設(shè)置或返回對象相對于窗口左邊的位置

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

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均無關(guān))

offsetwidth:是元素相對父元素的偏移寬度。等于border+padding+width
clientwidth：是元素的可見寬度。等于padding+width
scrollwidth:是元素的寬度且包括滾動部分。
offsetLeft:Html元素相對于自己的offsetParent元素的位置
scrollLeft:返回和設(shè)置當前橫向滾動務(wù)的坐標值

最新評論