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

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

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

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

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

我們對(duì)前面提到的 offsetParent 作個(gè)說明。

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

以上屬性在 FireFox 中也有效。

另外：我們這里所說的是指 HTML 控件的屬性值，并不是 document.body，document.body 的值在不同瀏覽器中有不同解釋（實(shí)際上大多數(shù)環(huán)境是由于對(duì) document.body 解釋不同造成的，并不是由于對(duì) 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
大家對(duì) clientHeight 都沒有什么異議，都認(rèn)為是內(nèi)容可視區(qū)域的高度，也就是說頁面瀏覽器中可以看到內(nèi)容的這個(gè)區(qū)域的高度，一般是最后一個(gè)工具條以下到狀態(tài)欄以上的這個(gè)區(qū)域，與頁面內(nèi)容無關(guān)。

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

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

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

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

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

scrollTop 是“卷”起來的高度值，示例：
代碼如下:

如果為 p 設(shè)置了 scrollTop，這些內(nèi)容可能不會(huì)完全顯示。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com