注：以下方法兼容IE6,7, FF3。
下面是取網頁的寬與高，情況很複雜，有正文寬高，窗口寬高，可能有滾動條.
有滾動條時正文高一定大於窗口高，
無滾到條時正文高可能小於等於窗口高。
寬度同理，就不說了。
應用1 :用JS取瀏覽器窗口內側的寬與高，動態調整頁面的寬度（或高度），求：網頁可見區域寬（或高），就是下面代碼中的Width_4（Height_4）。
應用2 ：做一個灰色的DIV蒙層矇住整個頁面，
頁面本無滾動條時，DIV蒙層過大，反而會出現滾動條，所以DIV蒙層尺寸一定要精確，用“網頁可見區域寬”，就是下面代碼中的Width_4（Height_4）。
頁面有滾動條時，DIV蒙層還要矇住滾動動條隱藏起來的部分,用“滾動條寬1”
//DIV蒙層的寬度 Width_1>Width_4?Width_1:Width_4
//DIV蒙層的高度 Height_1>Height_4?Height_1:Height_4
- var Width_1=document.body.scrollWidth; //滾動條寬1
- var Height_1=document.body.scrollHeight; //滾動條高1
- var Width_2=document.documentElement.scrollWidth; //滾動條寬2
- var Height_2=document.documentElement.scrollHeight; //滾動條寬2
- var Width_3=document.body.clientWidth; //body正文全文寬3
- var Height_3=document.body.clientHeight; //body正文全文高3
- var Width_4=document.documentElement.clientWidth; //網頁可見區域寬，滾動條隱藏部分不算
- var Height_4=document.documentElement.clientHeight; //網頁可見區域高
- var Width_5=window.screen.availWidth; //屏幕可用工作區寬度(用處不大)
- var Height_5=window.screen.availHeight;//屏幕可用工作區高度
- //DIV蒙層的寬度 Width_1>Width_4?Width_1:Width_4
- //DIV蒙層的高度 Height_1>Height_4?Height_1:Height_4
- alert("滾動條寬1 :"+Width_1+"，滾動條高1:"+Height_1+
- ",/n滾動條寬2:"+Width_2+"，滾動條高2:"+Height_2+
- ",/nbody正文全文寬3:"+Width_3+"，body正文全文高3:"+Height_3+
- "，/n網頁可見區域寬："+ Width_4+"，網頁可見區域高："+Height_4+
- ",/n屏幕可用工作區寬度:"+Width_5+", 屏幕可用工作區高度："+Height_5
- );
var Width_1=document.body.scrollWidth; //滾動條寬1
var Height_1=document.body.scrollHeight; //滾動條高1
var Width_2=document.documentElement.scrollWidth; //滾動條寬2
var Height_2=document.documentElement.scrollHeight; //滾動條寬2
var Width_3=document.body.clientWidth; //body正文全文寬3
var Height_3=document.body.clientHeight; //body正文全文高3
var Width_4=document.documentElement.clientWidth; //網頁可見區域寬，滾動條隱藏部分不算
var Height_4=document.documentElement.clientHeight; //網頁可見區域高
var Width_5=window.screen.availWidth; //屏幕可用工作區寬度(用處不大)
var Height_5=window.screen.availHeight;//屏幕可用工作區高度
//DIV蒙層的寬度 Width_1>Width_4?Width_1:Width_4
//DIV蒙層的高度 Height_1>Height_4?Height_1:Height_4
alert("滾動條寬1 :"+Width_1+"，滾動條高1:"+Height_1+
",/n滾動條寬2:"+Width_2+"，滾動條高2:"+Height_2+
",/nbody正文全文寬3:"+Width_3+"，body正文全文高3:"+Height_3+
"，/n網頁可見區域寬："+ Width_4+"，網頁可見區域高："+Height_4+
",/n屏幕可用工作區寬度:"+Width_5+", 屏幕可用工作區高度："+Height_5
);
(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)
下面是從w3school查到的,說的不是很詳細
根節點
有兩種特殊的文檔屬性可用來訪問根節點：
document.documentElement
document.body
第一個屬性可返回存在於 XML 以及 HTML 文檔中的文檔根節點。
第二個屬性是對 HTML 頁面的特殊擴展，提供了對 <body> 標籤的直接訪問。
<script type="text/javascript" language="javascript">
function setStyle()
{
document.getElementById("Test").style.width=document.body.clientWidth;
document.getElementById("Test").style.Hight=window.screen.availHeight;
document.getElementById("checkbox_sizemodellist").style.width=screen.width;
document.getElementById("checkbox_sizemodellist").style.Hight=screen.height;
document.getElementById("checkbox_sizemodellist").style.left=0;
document.getElementById("checkbox_sizemodellist").style.top=0;
}
</script>
網頁可見區域寬： 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
