scrollWidth
是對象的實際內容的寬，不包邊線寬度，會隨對象中內容的多少改變（內容多了可能會改變對象的實際寬度）。
clientWidth
是對象可見的寬度，不包滾動條等邊線，會隨窗口的顯示大小改變。
offsetWidth
是對象的可見寬度，包滾動條等邊線，會隨窗口的顯示大小改變。
一個scrollWidth和clientWidth的例子：
<html>
<head>
<title>77.htm文件</title>
</head>
<body>
<textarea wrap="off" onfocus="alert('scrollWidth:'+this.scrollWidth+'\n clientWidth:'+this.clientWidth);"></textarea>
</body>
</html>
在文本框內輸入內容，當橫向滾動條沒出來前scrollWidth和clientWidth的值是一樣的。當一行內容超出文本框的寬度，就有橫向滾動條出來了，scrollWidth的值就變了。
scrollWidth是對象實際內容的寬度。
clientWidth是對象看到的寬度（不含邊線），這個例子里不會改變。
一個clientWidth和offsetWidth的例子：
<html>
<head>
<title>77.htm文件</title>
</head>
<body>
<textarea wrap="off" onfocus="alert('offsetWidth:'+this.offsetWidth+'\n clientWidth:'+this.clientWidth);"></textarea>
</body>
</html>
offsetWidth的值總是比clientWidth的值大。
clientWidth是對象看到的寬度（不含邊線）
offsetWidth是對象看到的寬度（含邊線，如滾動條的占用的寬）
轉：
總結了一個晚上，通過對IE DevToolbar和Firebug的觀察，畫出了這兩幅圖，以區別offsetWidth clientWidth scrollWidth scrollTop scrollLeft等屬性的細微差別，希望對各位寫js有所幫助！
第一幅圖中oEvent是一個時間發生時的一個參數對象，在IE和FF中的獲得方法就不用多說了吧。整個大背景是這個網頁的全部尺寸，中間的小框才是瀏覽器中的可見尺寸。 這幅圖就是針對為文檔（document）的各個height、width、top、left所做的說明。
第二幅圖主要是針對網頁中一個div的各個屬性值所做的說明。“DIV element client area”是這個div元素的可見區域，“scroll area”是這個div內容原始尺寸，但是由於div的css所設置的高度寬度容不下它的內容，所以出現滾動條。
(頁面寬度有限，圖片可能不會顯示完全，最好新開窗口打開圖片)
window對象：
（1）innerHeight屬性：窗口中文檔顯示區域的高度，不包括菜單欄、工具欄等部分。該屬性可讀可寫。
IE不支持該屬性，IE中body元素的clientHeight屬性與該屬性相同。
（2)innerWidth屬性：窗口中文檔顯示區域的寬度，同樣不包括邊框。該屬性可讀可寫。
IE不支持該屬性，IE中body元素的clientWidth屬性與該屬性相同。
clientHeight與clientWidth屬性是只讀的。
另外，IE不支持outerWidth、outerHeight屬性。
(3)pageXOffset屬性：整數只讀屬性，表示文檔向右滾動過的像素數。
IE不支持該屬性，使用body元素的scrollLeft屬性替代。
(4)pageYOffset屬性：整數只讀屬性，表示文檔向下滾動過的像素數。
IE不支持該屬性，使用body元素的scrollTop屬性替代。
兼容IE與DOM瀏覽器，如何獲取窗口中文檔顯示區域的寬度及高度，使用?:條件語句，如下：
windows.innerWidth ? windows.innerWidth : document.body.clientWidth;
windows.innerHeight ? windows.innerHeight : document.body.clientHeight;
元素對象：
offsetLeft、offsetTop屬性：獲取元素相對於文檔左上角的坐標位置。
----------------------------------------
之前在修改IE6下的一個顯示bug時，查到過這些，貼這備忘，后面給出了詳細說明，以前的版本，沒仔細的說明，特希望大家也收藏下。
網頁可見區域寬： document.body.clientWidth;
網頁可見區域高： document.body.clientHeight;
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬);
網頁可見區域高： document.body.offsetHeight (包括邊線的寬);
網頁正文全文寬： document.body.scrollWidth;
網頁正文全文高： document.body.scrollHeight;
網頁被卷去的高： document.body.scrollTop;
網頁被卷去的左： document.body.scrollLeft;
網頁正文部分上： window.screenTop;
網頁正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的寬： window.screen.width;
屏幕可用工作區高度： window.screen.availHeight;
屏幕可用工作區寬度：window.screen.availWidth;
1、offsetLeft
假設 obj 為某個 HTML 控件。
obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。
obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。
obj.offsetWidth 指 obj 控件自身的寬度，整型，單位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。
我們對前面提到的“上方或上層”與“左方或上層”控件作個說明。
例如：
<div id="tool">
<input type="button" value="提交">
<input type="button" value="重置">
</div>
“提交”按鈕的 offsetTop 指“提交”按鈕距“tool”層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。
“重置”按鈕的 offsetTop 指“重置”按鈕距“tool”層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。
“提交”按鈕的 offsetLeft 指“提交”按鈕距“tool”層左邊框的距離，因為距其左邊最近的是 “tool” 層的左邊框。
“重置”按鈕的 offsetLeft 指“重置”按鈕距“提交”按鈕右邊框的距離，因為距其左邊最近的是“提交”按鈕的右邊框。
以上屬性在 FireFox 中也有效。
另 外：我們這里所說的是指 HTML 控件的屬性值，並不是 document.body，document.body 的值在不同瀏覽器中有不同解釋（實際上大多數環境是由於對 document.body 解釋不同造成的，並不是由於對 offset 解釋不同造成的），點擊這里查看不同點。
標題：offsetTop 與 style.top 的區別
預備知識：offsetTop、offsetLeft、offsetWidth、offsetHeight
我們知道 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、offsetHeight和scrollHeight
我們這里說說四種瀏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋，這里說的是 document.body，如果是 HTML 控件，則又有不同，點擊這里查看。
這四種瀏覽器分別為IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。
-------------------------------
本文重新分析了clientHeight、offsetHeight、scrollHeight三個屬性在不同瀏覽器中的表現與差別
兼容性，特別是這幾個東西的兼容性是很復雜的，為了簡單，建議閱讀再談 document.documentElement 與 document.body 的 scrollWidth、offsetWidth、clientWidth 這篇文章。
我們這里說說四種瀏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋，這里說的是 document.body，如果是 HTML 控件，則又有不同，點擊這里查看。
這四種瀏覽器分別為IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。
文尾的重要說明比較重要，請注意。
看了評論，不少朋友，對我的描述還是很疑惑，所以我做了下面這個圖，來幫助理解。
從圖中，我們可以看到一個瀏覽器窗口，窗口被我故意拖小了，這樣形成了滾動條，所以網頁上端的內容就隱藏在了窗口上面，網頁下端的內容就隱藏在了窗口下面。
clientHeight、offsetHeight 和 scrollHeight 大致可以這樣解釋（詳細內容請仔細閱讀后面的內容）：
- clientHeight 圖中那塊白的的高度。
- offsetHeight、scrollHeight 圖中白的+上陰影部分+下陰影部分，也就是網頁內容高度。
- 順便提一下，那個上陰影部分（最上面一塊漸變黑色），就是 scrollTop。
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 則是網頁內容實際高度。
測試一下
測試文件。
簡單地說
clientHeight 就是透過瀏覽器看內容的這個區域高度。
NS、FF 認為 offsetHeight 和 scrollHeight 都是網頁內容高度，只不過當網頁內容高度小於等於 clientHeight 時，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小於 clientHeight。
IE、Opera 認為 offsetHeight 是可視區域 clientHeight 滾動條加邊框。scrollHeight 則是網頁內容實際高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同，只是把高度換成寬度即可。
重要說明
以上是在沒有指定 DOCTYPE 的情況下，如果指定了 DOCTYPE 為 XHTML，比如：DTD XHTML 1.0 Transitional，則意義又會不同，在這種情況下這三個值都是同一個值，都表示內容的實際高度（並不在乎窗口有多高）。
再說明一下，寫這篇文章時，Chrome 瀏覽器還沒有出來，后來我測試了一下 Chrome 在 指定了 DOCTYPE 為 XHTML 時的情況，真 BT，它的 clientHeight 和 offsetHeight 值相同，都表示內容的實際高度（並不在乎窗口有多高），scrollHeight 又是另外一套不知道什么玩意兒，總之這點它和 IE、Firefox 不同就是了。
好，回過來，如果要在指定的 DOCTYPE 為 XHTML 的情況下，要按文章開頭的解釋（即 clientHeight、offsetHeight、scrollHeight 意義不同）來應用，怎么辦呢？答案是：將 document.body 和 document.documentElement 一起應用，比如：document.documentElement.scrollLeft || document.body.scrollLeft（一般將 document.documentElement 寫在前面），類似應用請參見：http://www.cftea.com/c/2008/06/U1FSRIC247DWTK2M.asp。
轉自；http://www.cftea.com/c/751.asp
同理
clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同，只是把高度換成寬度即可。
=======================================================================
clientHeight與offsetHeight的區別
許多文章已經介紹了clientHeight和offsetHeight的區別，就是clientHeight的值不包括scrollbar的高度，而offsetHeight的值包括了scrollbar的高度。然而，clientHeight和offsetHeight的值到底由什么組成的呢？如何計算這兩個數的值？
1. clientHeight和offsetHeight的值由什么決定？
假如我們有以下的DIV，主要顯示的文字為"This is the main body of DIV"。
如上圖所示，clientHeight的值由DIV內容的實際高度和CSS中的padding值決定，而offsetHeight的值由DIV內容的實際高度，CSS中的padding值，scrollbar的高度和DIV的border值決定；至於CSS中的margin值，則不會影響clientHeight和offsetHeight的值。
2. CSS中的Height值對clientHeight和offsetHeight有什么影響？
首先，我們看一下CSS中Height定義的是什么的高度。如在本文最后部分“APPENDIX示例代碼”（注：以下稱為“示例代碼”）中，innerDIVClass的Height值設定為50px，在IE下計算出來的值如下所示。也就是說，在IE里面，CSS中的Height值定義了DIV包括padding在內的高度（即offsetHeight的值）；在Firefox里面，CSS中的Height值只定義的DIV實際內容的高度，padding並沒有包括在這個值里面(70 = 50 + 10 * 2)。
in IE:
innerDiv.clientHeight: 46
innerDiv.offsetHeight: 50
outerDiv.clientHeight: 0
outerDiv.offsetHeight: 264
in Firfox:
innerDiv.clientHeight: 70
innerDiv.offsetHeight: 74
outerDiv.clientHeight: 348
outerDiv.offsetHeight: 362
在上面的示例中，也許你會很奇怪，為什么在IE里面outerDiv.clientHeight的值為0。那是因為示例代碼中，沒有定義outerDIVClass的Height值，這時，在IE里面，則clientHeight的值是無法計算的。同樣，在示例代碼中，如果將innerDIVClass中的Height值去年，則innerDIV.clientHeight的值也為0。(注：在Firefox下不存在這種情況)。
如果CSS中Height值小於DIV要顯示內容的高度的時候呢（當CSS中沒有定義overflow的行為時）？在IE里面，整個clientHeight（或者offsetHeight）的值並沒有影響，DIV會自動被撐大；而在Firefox里面，DIV是不會被撐開的。如在示例代碼中，將innerDivClass的Height值設為0，則計算結果如下所示。IE里面的DIV被撐開，其clientHeight值等於內容的高度與padding*2的和；而Firefox里面，文字將溢出DIV的邊界，其clientHeight值正好是padding值的兩倍。
In IE:
innerDiv.clientHeight: 38
innerDiv.offsetHeight: 42
outerDiv.clientHeight: 0
outerDiv.offsetHeight: 256
In Firefox:
innerDiv.clientHeight: 20
innerDiv.offsetHeight: 24
outerDiv.clientHeight: 298
outerDiv.offsetHeight: 312
<html> <head> <style type="text/css">...... .innerDivClass {...}{...}{...}{ color: red; margin: 37px; padding: 10px; border: 2px solid #000000; height: 50px; } .outerDivClass {...}{...}{...}{ padding: 100px; margin: 200px; border: 7px solid #000000; } </style> <script>...... function checkClientHeight() ......{ var innerDiv = document.getElementById("innerDiv"); var outerDiv = document.getElementById("outerDiv"); result.innerHTML = "innerDiv.clientHeight: " + innerDiv.clientHeight + "<br />"; result.innerHTML += "innerDiv.offsetHeight: " + innerDiv.offsetHeight + "<br />"; result.innerHTML += "outerDiv.clientHeight: " + outerDiv.clientHeight + "<br />"; result.innerHTML += "outerDiv.offsetHeight: " + outerDiv.offsetHeight + "<br />"; } </script> </head> <body> <div id="outerDiv" class="outerDivClass"> <div class="innerDivClass" id="innerDiv"> Hello world. </div> </div> <p></p> <div id="result"> </div> <input type="button" onclick="checkClientHeight()" text="Click Me" Value="Click Me" /> </body> </html>
更多：http://www.blogjava.net/Alpha/articles/119977.html
-------------------------------------------------
scrollTop、scrollLeft、scrollWidth、scrollHeight
上面是一個網頁，由於窗口大限的限制，沒有完全顯示出來，沒有顯示出來的，用陰影標注了。
- 上陰影就是 scrollTop；
- 上陰影 + 白的 + 下陰影就是 scrollHeight。
scrollTop 是“卷”起來的高度值，示例：
<div style="width:100px;height:300px;background-color:#FFFF00;" id="t">如果為 p 設置了 scrollTop，這些內容可能不會完全顯示。</div>
</div>
<script type="text/javascript">
<!--
var p = document.getElementById("p");
p.scrollTop = 10;
//-->
</script>
scrollTop、scrollLeft
由於為外層元素 p（注意是 p，不是 t）設置了 scrollTop，所以內層元素會向上“卷”，這卷起來的部分就是 scrollTop。
scrollLeft 也是類似道理。
scrollWidth、scrollHeight
我們已經知道 offsetHeight 是自身元素的高度，而 scrollHeight 是內層元素的實際高度 + 外層元素 padding，包含內層元素的隱藏的部分。
上述中 p（注意是 p，不是 t）的 offsetHeight 為 200，而其 scrollHeight 為 300。如果 p 具有 padding，那么應該把 padding 算到 scrollHeight 中，但其 border、margin 不應計算在內。
scrollHeight 也是類似道理。
IE 和 FireFox 全面支持，而 Netscape 8（很老了） 和 Opera 7.6（很老了） 不支持 scrollTop、scrollLeft（document.body.scrollTop、document.body.scrollLeft 除外）。
轉自：http://www.cftea.com/c/2006/12/WOYNSH75QM4NPFRS.asp
offsetTop scroolTop 區別：
offsetTop:當前對象到其上級層頂部的距離.
不能對其進行賦值.設置對象到頁面頂部的距離請用style.top屬性.
scrollTop:
對象的最頂部到對象在當前窗口顯示的范圍內的頂邊的距離．
即是在出現了縱向滾動條的情況下，滾動條拉動的距離．
一個例子：
window.onload=function(){ var obj=document.getElementById("p"); obj.innerHTML='offsetTop:'+obj.offsetTop+'<br/>'+ 'scrollTop:'+obj.scrollTop+'<br/>'+ 'offsetHeigh:'+obj.scrollHeight; }; <body> sfsafa <div style="width:200px;height:200px;background-color:#999999;overflow:hidden;" id="p"> </div> </body>
obj內容為：
sfsafa
scrollTop:0
offsetHeigh:300
1.offsetTop :
當前對象到其上級層頂部的距離.
不能對其進行賦值.設置對象到頁面頂部的距離請用style.top屬性.
2.offsetLeft :
當前對象到其上級層左邊的距離.
不能對其進行賦值.設置對象到頁面左部的距離請用style.left屬性.
3.offsetWidth :
當前對象的寬度.
與style.width屬性的區別在於:如對象的寬度設定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值
4.offsetHeight :
與style.height屬性的區別在於:如對象的寬度設定值為百分比高度,則無論頁面變大還是變小,style.height都返回此百分比,而offsetHeight則返回在不同頁面中對象的高度值而不是百分比值
5.offsetParent :
當前對象的上級層對象.
注意.如果對象是包括在一個DIV中時,此DIV不會被當做是此對象的上級層,(即對象的上級層會跳過DIV對象)上級層是Table時則不會有問題.
利用這個屬性，可以得到當前對象在不同大小的頁面中的絕對位置．
得到絕對位置。
function GetPosition(obj) 2{ 3 var left = 0; 4 var top = 0; 5 6 while(obj != document.body) 7 { 8 left = obj.offsetLeft; 9 top = obj.offsetTop; 10 11 obj = obj.offsetParent; 12 } 13 14 alert("Left Is : " + left + "\r\n" + "Top Is : " + top); 15}
6.scrollLeft :
對象的最左邊到對象在當前窗口顯示的范圍內的左邊的距離．
即是在出現了橫向滾動條的情況下，滾動條拉動的距離．
7.scrollTop
對象的最頂部到對象在當前窗口顯示的范圍內的頂邊的距離．
即是在出現了縱向滾動條的情況下，滾動條拉動的距離．