注:以下方法兼容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