有時我們需要獲得瀏覽器窗口或屏幕的大小、窗口下拉框下拉的距離等數據，對應這些需求，js中提供了不少解決方法，只是數量稍多容易混淆它們各自的意義，下面咱們用圖例來解釋下12個常見對象屬性的作用。
其中有6個常用的瀏覽器窗體屬性（由於offsetWidth/Height在不同瀏覽器下表現有出入，故不在本章討論）：
document.documentElement.clientWidth
document.documentElement.clientHeight
document.documentElement.scrollWidth
document.documentElement.scrollHeight
document.body.scrollTop
document.body.scrollLeft
和6個常用的屏幕對象屬性：
window.screen.width
window.screen.height
window.screenTop
window.screenLeft
window.screen.availHeight
window.screen.availWidth
先貼下代碼，方便各位先調試看下結果，要注意的地方是務必確保js代碼在頁面加載后才執行（放到最后面就得了），不然會出現body未加載完成則執行js代碼，導致某些屬性返回值為undefined：
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>無標題文檔</title> 5 <style> 6 body{ 7 margin:0; 8 } 9 </style> 10 11 12 </head> 13 <body> 14 <div id="dd" style="width:2000px; height:1800px; margin:0;"> 15 嘖嘖，隨便寫點內容唄<br/><br/><br/>嘖嘖，隨便寫點內容唄嘖嘖，隨便寫點內容唄嘖嘖，隨便寫點內容唄<br/><br/><br/>嘖嘖，隨便寫點內容唄<br/><br/><br/> 16 嘖嘖，隨便寫點內容唄<br/><br/><br/>嘖嘖，隨便寫點內容唄嘖嘖，隨便寫點內容唄嘖嘖，隨便寫點內容唄<br/><br/><br/>嘖嘖，隨便寫點內容唄<br/><br/><br/> 17 嘖嘖，隨便寫點內容唄<br/><br/><br/>嘖嘖，隨便寫點內容唄<br/><br/><br/>嘖嘖，隨便寫點內容唄嘖嘖，隨便寫點內容唄嘖嘖，隨便寫點內容唄 18 </div> 19 </body> 20 <script> 21 console.log(document.documentElement.clientWidth+" "+document.documentElement.clientHeight+" "+document.documentElement.scrollWidth+" " 22 +document.documentElement.scrollHeight+" "+document.body.scrollTop+" "+document.body.scrollLeft 23 +" "+window.screen.width+" "+window.screen.height+" "+window.screenTop+" "+window.screenLeft 24 +" "+window.screen.availHeight+" "+window.screen.availWidth 25 ); 26 </script> 27 </html>
⑴ document.documentElement.clientWidth 和 document.documentElement.clientHeight 是獲取瀏覽器當前窗口視圖區域（也就是說不包括工具欄、滾動條等）的實際寬高（舊的HTML標准是寫作document.body.clientWidth/clientHeight，已過時，建議大家用新標准來描述）：
由於IE8-會把這個屬性當作整個文檔的寬度或高度，而JQ的$(window).height()在部分瀏覽器下也會出錯，建議如果要獲取瀏覽器可視區域高度，可以這樣寫：
var win_h = window.innerHeight||document.documentElement.clientHeight;
⑵ document.documentElement.scrollWidth 和 document.documentElement.scrollHeight 是整個網頁大大小，包括可視區域和被卷起來的區域，網頁整體就是了（在這例子里我們是設置div寬高分別為2000px和1800px的）：
⑶ document.body.scrollTop 和 document.body.scrollLeft 是整個網頁的上方或者左邊被卷起來的部分（注意這里中間部分是body而不再是documentElement）：
有人問，那我要獲取網頁被卷起來的下部分或者右部分怎么辦？
答案很簡單，比如你要得到網頁被卷起來的下部分，就用整個網頁的高document.documentElement.scrollHeight減去網頁上方被卷起來的部分document.body.scrollTop，再減去當前瀏覽器視圖區域高度document.documentElement.clientHeight即可
⑷ window.screen.width 和 window.screen.height 是獲取你整個顯示器屏幕大小的（我的顯示器分辨率為1680*1050）：
⑸ window.screenTop 和 window.screenLeft 是瀏覽器窗口頂部/左端距離屏幕大小的：
⑹ window.screen.availHeight 和 window.screen.availWidth 是用戶屏幕實際工作區（減去任務欄等非工作區模塊大小）的高和寬：
OK這12個屬性都介紹完了，其實用的最多的還是前6個跟瀏覽器和網頁密切關聯的屬性，后面幾個屏幕相關的屬性用的比較少吧（比如設置彈出廣告窗口和屏幕頂端的距離什么的），感覺記好前六個就行啦。
收工~周末快樂~！