摘要：由于為外層元素設(shè)置了，所以內(nèi)層元素會(huì)向上卷。和全面支持，而和不支持除外。認(rèn)為是網(wǎng)頁(yè)內(nèi)容高度，不過(guò)最小值是。認(rèn)為和都是網(wǎng)頁(yè)內(nèi)容高度，只不過(guò)當(dāng)網(wǎng)頁(yè)內(nèi)容高度小于等于時(shí)，的值是，而可以小于。認(rèn)為是可視區(qū)域滾動(dòng)條加邊框。

轉(zhuǎn)載自http://www.cnblogs.com/seven_...
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.clientWidth;
網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.clientHeight;
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬);
網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.offsetHeight (包括邊線的寬);
網(wǎng)頁(yè)正文全文寬： document.body.scrollWidth;
網(wǎng)頁(yè)正文全文高： document.body.scrollHeight;
網(wǎng)頁(yè)被卷去的高： document.body.scrollTop;
網(wǎng)頁(yè)被卷去的左： document.body.scrollLeft;
網(wǎng)頁(yè)正文部分上： window.screenTop;
網(wǎng)頁(yè)正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的寬： window.screen.width;
屏幕可用工作區(qū)高度： window.screen.availHeight;
屏幕可用工作區(qū)寬度：window.screen.availWidth;

1、offsetLeft

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

obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。

obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。

obj.offsetWidth 指 obj 控件自身的寬度，整型，單位像素。

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

我們對(duì)前面提到的“上方或上層”與“左方或上層”控件作個(gè)說(shuō)明。

例如：

“提交”按鈕的 offsetTop 指“提交”按鈕距“tool”層上邊框的距離，因?yàn)榫嗥渖线呑罱氖?“tool” 層的上邊框。
“重置”按鈕的 offsetTop 指“重置”按鈕距“tool”層上邊框的距離，因?yàn)榫嗥渖线呑罱氖?“tool” 層的上邊框。

“提交”按鈕的 offsetLeft 指“提交”按鈕距“tool”層左邊框的距離，因?yàn)榫嗥渥筮呑罱氖?“tool” 層的左邊框。
“重置”按鈕的 offsetLeft 指“重置”按鈕距“提交”按鈕右邊框的距離，因?yàn)榫嗥渥筮呑罱氖恰疤峤弧卑粹o的右邊框。

以上屬性在 FireFox 中也有效。

另外：我們這里所說(shuō)的是指 HTML 控件的屬性值，并不是 document.body，document.body 的值在不同瀏覽器中有不同解釋（實(shí)際上大多數(shù)環(huán)境是由于對(duì) document.body 解釋不同造成的，并不是由于對(duì) offset 解釋不同造成的），點(diǎn)擊這里查看不同點(diǎn)。
標(biāo)題：offsetTop 與 style.top 的區(qū)別

預(yù)備知識(shí)：offsetTop、offsetLeft、offsetWidth、offsetHeight

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

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

二、offsetTop 只讀，而 style.top 可讀寫(xiě)。

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

offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是同樣道理。
標(biāo)題：clientHeight、offsetHeight和scrollHeight

我們這里說(shuō)說(shuō)四種瀏覽器對(duì) document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋，這里說(shuō)的是 document.body，如果是 HTML 控件，則又有不同，點(diǎn)擊這里查看。

這四種瀏覽器分別為IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

2、clientHeight

clientHeight

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

offsetHeight

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

scrollHeight

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

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

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

但是
FF 在不同的 DOCTYPE 中對(duì) clientHeight 的解釋不同， xhtml 1 trasitional 中則不是如上解釋的。其它瀏覽器則不存在此問(wèn)題。
標(biāo)題：scrollTop、scrollLeft、scrollWidth、scrollHeight

3、scrollLeft
scrollTop 是“卷”起來(lái)的高度值，示例：

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

由于為外層元素 p 設(shè)置了 scrollTop，所以內(nèi)層元素會(huì)向上卷。

scrollLeft 也是類似道理。

我們已經(jīng)知道 offsetHeight 是自身元素的寬度。

而 scrollHeight 是內(nèi)部元素的絕對(duì)寬度，包含內(nèi)部元素的隱藏的部分。

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

scrollWidth 也是類似道理。

IE 和 FireFox 全面支持，而 Netscape 和 Opera 不支持 scrollTop、scrollLeft（document.body 除外）。
發(fā)表時(shí)間：2007-10-15 20:20:16
標(biāo)題：offsetTop、offsetLeft、offsetWidth、offsetHeight

4、clientLeft

返回對(duì)象的offsetLeft屬性值和到當(dāng)前窗口左邊的真實(shí)值之間的距離，可以理解為邊框的長(zhǎng)度

一直以來(lái)對(duì)offsetLeft，offsetTop，scrollLeft，scrollTop這幾個(gè)方法很迷糊，花了一天的時(shí)間好好的學(xué)習(xí)了一下．得出了以下的結(jié)果：
1.offsetTop :
當(dāng)前對(duì)象到其上級(jí)層頂部的距離.
不能對(duì)其進(jìn)行賦值.設(shè)置對(duì)象到頁(yè)面頂部的距離請(qǐng)用style.top屬性.

2.offsetLeft :
當(dāng)前對(duì)象到其上級(jí)層左邊的距離.
不能對(duì)其進(jìn)行賦值.設(shè)置對(duì)象到頁(yè)面左部的距離請(qǐng)用style.left屬性.

3.offsetWidth :
當(dāng)前對(duì)象的寬度.
與style.width屬性的區(qū)別在于:如對(duì)象的寬度設(shè)定值為百分比寬度,則無(wú)論頁(yè)面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁(yè)面中對(duì)象的寬度值而不是百分比值

4.offsetHeight :
與style.height屬性的區(qū)別在于:如對(duì)象的寬度設(shè)定值為百分比高度,則無(wú)論頁(yè)面變大還是變小,style.height都返回此百分比,而offsetHeight則返回在不同頁(yè)面中對(duì)象的高度值而不是百分比值

5.offsetParent :
當(dāng)前對(duì)象的上級(jí)層對(duì)象.
注意.如果對(duì)象是包括在一個(gè)DIV中時(shí),此DIV不會(huì)被當(dāng)做是此對(duì)象的上級(jí)層,(即對(duì)象的上級(jí)層會(huì)跳過(guò)DIV對(duì)象)上級(jí)層是Table時(shí)則不會(huì)有問(wèn)題.
利用這個(gè)屬性，可以得到當(dāng)前對(duì)象在不同大小的頁(yè)面中的絕對(duì)位置．
得到絕對(duì)位置腳本代碼

function GetPosition(obj)
{
 var left = 0;
 var top   = 0;

 while(obj != document.body)
 {
       left = obj.offsetLeft;
        top   = obj.offsetTop;

        obj = obj.offsetParent;
 }

 alert("Left Is : " + left + "
" + "Top   Is : " + top);
}

6.scrollLeft :
對(duì)象的最左邊到對(duì)象在當(dāng)前窗口顯示的范圍內(nèi)的左邊的距離．
即是在出現(xiàn)了橫向滾動(dòng)條的情況下，滾動(dòng)條拉動(dòng)的距離．

7.scrollTop
對(duì)象的最頂部到對(duì)象在當(dāng)前窗口顯示的范圍內(nèi)的頂邊的距離．
即是在出現(xiàn)了縱向滾動(dòng)條的情況下，滾動(dòng)條拉動(dòng)的距離．

我們這里說(shuō)說(shuō)四種瀏覽器對(duì) document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋，這里說(shuō)的是 document.body，如果是 HTML 控件，則又有不同，點(diǎn)擊這里查看。

這四種瀏覽器分別為IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

clientHeight

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

offsetHeight

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

scrollHeight

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

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

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

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