網頁可見區域寬： 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、offsetWidth (width+padding+border)
當前對象的寬度。
style.width也是當前對象的寬度(width+padding+border)。
區別：1)style.width返回值除了數字外還帶有單位px；
2)如對象的寬度設定值爲百分比寬度,則無論頁面變大還是變小，
style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值；
3)如果沒有給 HTML 元素指定過 width樣式，則 style.width 返回的是空字符串；
2、offsetHeight :(Height+padding+border)
當前對象的高度。
style.height也是當前對象的高度(height+padding+border)。
區別：1)style.height返回值除了數字外還帶有單位px；
2)如對象的高度設定值爲百分比高度,則無論頁面變高還是變矮，
style.height都返回此百分比,而offsetHeight則返回在不同頁面中對象的高度值而不是百分比值；
3)如果沒有給 HTML 元素指定過 height樣式，則 style.height返回的是空字符串；
3、offsetLeft :
當前對象到其上級層左邊的距離。
不能對其進行賦值.設置對象到其上級層左邊的距離請用style.left屬性。
style.left當前對象到其上級層左邊的距離。
區別：1)style.left返回值除了數字外還帶有單位px；
2)如對象到其上級層左邊的距離設定值爲百分比，
style.left返回此百分比,而offsetLeft則返回到其上級層左邊的距離的值；
3)如果沒有給 HTML 元素指定過 left樣式，則 style.left返回的是空字符串；
4、offsetTop :
當前對象到其上級層頂部邊的距離。
不能對其進行賦值.設置對象到上級層頂部邊的距離請用style.top屬性。
style.top當前對象到其上級層頂部邊的距離。
區別：1)style.top返回值除了數字外還帶有單位px；
2)如對象到其上級層頂部邊的距離設定值爲百分比，
style.top返回此百分比,而offsetTop則返回到其上級頂部邊的距離的值；
3)如果沒有給 HTML 元素指定過 top樣式，則 style.top返回的是空字符串；
注意：如果上級層爲body，由於IE、FF對padding、margin的解釋不一樣所以要明確規定處理不是下列的區別就不成立了。
IE 1)如果Div的上級層是body，而div與body之間有個div，如body->div->divo；divo的offsetTop=div的padding+margin+boder；
2）如果Div的上級層是body，如body>divo；divo的offsetTop=div的padding+margin+boder；
這divo的offsetTop=divo的margin >body.padding則爲divo的margin，否則爲body.padding誰大是誰？
FF 上述兩種情況：offsetTop=margin+padding ;
(IE與FF中的body默認padding爲10)在IE6.0 FF3.6.13
5、scrollWidth:獲取對象的滾動寬度 。
6、scrollHeight: 獲取對象的滾動高度。
7、scrollLeft:設置或獲取位於對象左邊界和對象中目前可見內容的最左端之間的距離(width+padding爲一體)
8、scrollTop:設置或獲取位於對象最頂端和對象中可見內容的最頂端之間的距離；(height+padding爲一體)
9、clientWidth: 獲取對象可見內容的寬度，不包括滾動條，不包括邊框；
10、clientHeight: 獲取對象可見內容的高度，不包括滾動條，不包括邊框；
11、clientLeft: 獲取對象的border寬度
12、clientTop：獲取對象的border高度
13、offsetParent :當前對象的上級層對象.
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
以上屬性測試的文檔類型爲：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果不寫文檔類型，瀏覽器就會按照 HTML 4.0 的方式來處理，則效果可能不同。
常用:
JS 獲取瀏覽器窗口大小
// 獲取窗口寬度if (windows.innerWidth)winWidth = windows.innerWidth;else if ((document.body) && (document.body.clientWidth))winWidth = document.body.clientWidth;// 獲取窗口高度if (windows.innerHeight)winHeight = windows.innerHeight;else if ((document.body) && (document.body.clientHeight))winHeight = document.body.clientHeight;// 通過深入 Document 內部對 body 進行檢測，獲取窗口大小if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth){winHeight = document.documentElement.clientHeight;winWidth = document.documentElement.clientWidth;} |
詳細:
關於獲取各種瀏覽器可見窗口大小:
在我本地測試當中：
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可獲得，很簡單，很方便。
而在公司項目當中：
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox則使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原來是W3C的標準在作怪啊
如果在頁面中添加這行標記的話 在IE中：
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度
在FireFox中：
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度
?
在Opera中：
document.body.clientWidth ==> 可見區域寬度
document.body.clientHeight ==> 可見區域高度
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）
document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）
而如果沒有定義W3C的標準，則
IE爲：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox爲：
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）
Opera爲：
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）
scrollHeight: 獲取對象的滾動高度。
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
(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)
假設 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 是“卷”起來的高度值，示例：
<div style="width:50px;height:300px;background-color:#0000FF;" id="t">如果爲 p 設置了 scrollTop，這些內容可能不會完全顯示。</div>
</div>
<script type="text/javascript">
var p = document.getElementByIdx_x("p");
p.scrollTop = 10;
</script>
由於爲外層元素 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 除外）。
1.clientHeight, clientWidth:
這兩個屬性大體上顯示了元素內容的象素高度和寬度.理論上說這些測量不考慮任何通過樣式表加入
元素中的頁邊距,邊框等.
2.clientLeft,clientTop:
這兩個返回的是元素周圍邊框的厚度,如果不指定一個邊框或者不定位改元素,他的值就是0.
3.scrollLeft,scrollTop:
如果元素是可以滾動的,可以通過這倆個屬性得到元素在水平和垂直方向上滾動了多遠,單位是象素.
對於不可以滾動的元素,這些值總是0.
4.scrollHeight,scrollWidth:
不管有多少對象在頁面上可見,他們得到的是整體.
5.style.left:
定位元素與包含它的矩形左邊界的偏移量
6.style.pixelLeft:
返回定位元素左邊界偏移量的整數像素值.因爲屬性的非像素值返回的是包含單位的字符串,例如,30px. 利用這個屬性可以單獨處理以像素爲單位的數值.
7.style:posLetf:
返回定位元素左邊界偏移量的數量值,不管相應的樣式表元素指定什麼單位.因爲屬性的非位置值返回的是包含單位的字符串,例如,1.2em
top,pixelTop,posTOp這幾個類比就行了.
LEFT: 爲從左向右移的位置,即掛件距離屏幕左邊緣的距離;
clientLeft 返回對象的offsetLeft屬性值和到當前窗口左邊的真實值之間的距離
offsetLeft 返回對象相對於父級對象的佈局或座標的left值，就是以父級對象左上角爲座標原點，向右和向下爲X、Y軸正方向的x座標
pixelLeft 設置或返回對象相對於窗口左邊的位置
scrollWidth 是對象的實際內容的寬，不包邊線寬度，會隨對象中內容的多少改變（內容多了可能會改變對象的實際寬度）。
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均無關)
offsetwidth:是元素相對父元素的偏移寬度。等於border+padding+width
clientwidth：是元素的可見寬度。等於padding+width
scrollwidth:是元素的寬度且包括滾動部分。
offsetLeft:Html元素相對於自己的offsetParent元素的位置
scrollLeft:返回和設置當前橫向滾動務的座標值
<input type="button" value="點一下" οnclick="move()">
<div id="d" style="background-color:#ff9966; position:absolute; left:170px; top:100px;width:300;height:300;overflow:scroll"
οnclick="alert('offsetLeft:'+this.offsetLeft)">
<div style="height:600;width:600" οnclick="alert('offsetLeft:'+this.offsetLeft)"></div>
</div>
<script language="javascript">
function move()
{
var d=document.getElementByIdx_x("d")
a=eval_r(20)
d.scrollLeft+=a
}
</script>
保存爲網頁，運行一下，點按鈕，滾動條移動
點擊div，先彈出b相對於a的位置，再彈出a相對於窗口的位置
