獲得瀏覽器窗口的尺寸
一、對於IE9+、Chrome、Firefox、Opera以及Safari
瀏覽器窗口的內部高度： window.innerHeight
瀏覽器窗口的內部寬度： window.innerWidth
二、對於Internet Explorer8、7、6、5
表示HTML文檔所在窗口的當前高度： document.documentElement.clientHeight
表示HTML文檔所在窗口的當前寬度： document.documentElement.clientWidth
或者
Document對象的body屬性對應HTML文檔的<body>標簽
document.body.clientHeight
document.body.clientWidth
在不同瀏覽器都實用的JavaScript方案：
var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;
示例：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <script type="text/javascript"> var w=document.documentElement.clientWidth||document.body.clientWidth; var h=document.documentElement.clientHeight||document.body.clientHeight; document.write(w+"*"+h+"<br>") var w=document.documentElement.clientWidth; var h=document.documentElement.clientHeight; document.write(w+"*"+h+"<br>") var w=window.innerWidth; var h=window.innerHeight; document.write(w+"*"+h+"<br>") //document.body.clientHeight的值很奇怪很小，其實是因為代碼從上往下執行，當前body里有多少內容，高度就是被這些內容撐高的，如果你把它寫在最前面，可能取到的是0，因為當前還沒有內容 var w=document.body.clientWidth; var h=document.body.clientHeight; document.write(w+"*"+h) </script> </body> </html>
網頁尺寸scrollHeight
scrollHeight和scrollWidth，獲取網頁內容高度和寬度。
一、針對IE、Opera
scrollHeight是網頁內容實際高度，可以小於clientHeight
二、針對NS、FF
scrollHeight是網頁內容高度,不過最小值是clientHeight。
也就是說網頁內容實際高度小於clientHeight時，scrollHeight返回clientHeight。
三、瀏覽器兼容性
var w=document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h=document.documentElement.scrollHeight
|| document.body.scrollHeight;
注意：區分大小寫
scrollHeight和scrollWidth還可以獲取Demo元素中內容實際占用的高度和寬度。
網頁尺寸offsetHeight
offsetHeight和offsetWidth，獲取網頁內容高度和寬度(包括滾動條等邊線，會隨窗口的顯示大小改變)。
一、值
offsetHeight = clientHeight + 滾動條 + 邊框。
二、瀏覽器兼容性
var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;
網頁卷去的距離和偏移量
scrollLeft:設置或獲取位於給定對象左邊界與窗口中目前可見內容的最左端之間的距離，即左邊灰色的內容。
scrollTop:設置或獲取位於對象最頂端與窗口中可見內容的最頂端之間的距離，即上邊灰色的內容。
offsetLeft:獲取指定對象相對於版面或由offsetParent屬性指定的父坐標的計算左側位置。
offsetTop:獲取指定對象相對於版面或由offsetParent屬性指定的父坐標的計算頂端位置。
注意：
1、區分大小寫
2、offsetParent：布局中設置postion屬性（Relative、Absolute、fixed）的父容器，從最近的父節點開始，一層層向上找，直到HTML的body。
示例：調整橫豎滾動條后，點擊按鈕后，查看offsetTop、offsetLeft、scrollTop、scrollLeft值的變化。
<!DOCTYPE HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> function req(){ var div = document.getElementById("div1"); document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1距離屏幕頂部的距離 document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1距離屏幕左部的距離 document.getElementById("li3").innerHTML = (div.scrollTop)+"px";//div1縱向滾動條滾動的距離 document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1橫向滾動條滾動的距離 } </script> </head> <body style="border:10px solid #ccc;padding:0px 0px;margin:5px 10px"> <div style="width:60%;border-right:1px dashed red;float:left;"> <div style="float:left;"> <div id="div1" style="border:5px red solid;height:300px;width:200px;overflow:auto"> <div style="height:500px;width:400px">請調整橫豎滾動條后，點擊按鈕后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div> </div> <input type="button" value="點擊我!" onclick="req()" style="border: 1px solid purple;height: 25px;"/> </div> </div> <div style="width:30%;float:left;"> <ul style="list-style-type: none; line-height:30px;">結果： <li>offsetTop : <span id="li1"></span></li> <li>offsetLeft : <span id="li2"></span></li> <li> scrollTop : <span id="li3"></span></li> <li>scrollLeft : <span id="li4"></span></li> </ul> </div> <div style="clear:both;"></div> </body> </html>
