在web前端編程中，我們有的時候需要獲取瀏覽器有關窗口的大小和位置，尤其是瀏覽器窗口可視區域的大小和位置，更是我們經常要用到的。
一般的，在獲取瀏覽器窗口的大小和位置時，有以下幾個屬性可以使用：
1) window.innerHeight
2) window.innerWidth
3) window.pageXOffset
4) window.pageYOffset
5) document.documentElement.clientHeight
6) document.documentElement.clientWidth
7) document.documentElement.scrollLeft
8) document.documentElement.scrollTop
9) document.body.clientHeight
10) document.body.clientWidth
11) document.body.scrollLeft
12) document.body.scrollTop
在不同的瀏覽器中，以上12個屬性所代表的意義也是不一樣的。特別需要注意的是，當使用或者不使用<!DOCTYPE>聲明顯示一個文檔的時候，以上12個屬性的意義也會發生變化。
為徹底搞清楚它們的含義，筆者在IE6/IE7/IE8/IE9/FireFox/Chrome/Safari下進行了測試，總結如下表所示：
| 瀏覽器
屬性 |
Firefox/Chrome/Safari (帶<!DOCTYPE>聲明) |
Firefox/Chrome/Safari (不帶<!DOCTYPE>聲明) |
IE 6/7/8/9 (帶<!DOCTYPE>聲明) |
IE 6/7/8/9 (不帶<!DOCTYPE>聲明) |
| window.innerWidth/innerHeight |
窗口顯示區（可視區域）的寬度和高度，包括滾動條區域 |
窗口顯示區（可視區域）的寬度和高度，包括滾動條區域 |
IE 6/7/8 Undefined
IE 9 同Firefox |
IE 6/7/8 Undefined
IE 9 同Firefox |
| document.documentElement.clientWidth/clientHeight |
窗口顯示區（可視區域）的寬度和高度，不包括滾動條區域 |
<html>元素的寬度和高度（注意包括了不可見的區域） |
IE 6/7/8/9 窗口顯示區（可視區域）的寬度和高度，不包括滾動條區域 |
IE 6/7/8 總為0
IE 9 窗口顯示區（可視區域）的寬度和高度，不包括滾動條區域 |
| document.body.clientWidth/clientHeight |
<body>元素的寬度和高度（注意，包括了不可見的區域） |
窗口顯示區（可視區域）的寬度和高度，不包括滾動條區域 |
<body>元素的寬度和高度（注意，它包括了不可見的區域） |
IE 6/7/8 窗口顯示區（可視區域）的寬度和高度，不包括滾動條區域）
IE 9 <body>元素的寬度和高度（注意，它包括了不可見的區域） |
| window.pageXOffset/pageYOffset |
當前頁面相對於窗口顯示區左上角的 X /Y位置，即水平/垂直滾動條已滾動的距離 |
當前頁面相對於窗口顯示區左上角的 X /Y位置，即水平/垂直滾動條已滾動的距離 |
IE 6/7/8 Undefined
IE 9 同Firefox |
IE 6/7/8 Undefined
IE 9 同Firefox |
| document.documentElement.scrollTop/scrollLeft |
Firefox： 當前頁面相對於窗口顯示區左上角的 X /Y位置，即水平/垂直滾動條已滾動的距離，同window.pageXOffset/pageYOffset
Chrome/Safari： 總為0 |
總為0 |
IE 6/7/8/9 當前頁面相對於窗口顯示區左上角的 X /Y位置，即水平/垂直滾動條已滾動的距離 |
IE 6/7/8 總為0
IE 9 當前頁面相對於窗口顯示區左上角的 X /Y位置，即水平/垂直滾動條已滾動的距離 |
| document.body.scrollTop/scrollLeft |
FireFox： 總為0
Chrome/Safari： 當前頁面相對於窗口顯示區左上角的 X /Y位置，即水平/垂直滾動條已滾動的距離，同window.pageXOffset/pageYOffset |
當前頁面相對於窗口顯示區左上角的 X /Y位置，即水平/垂直滾動條已滾動的距離，同window.pageXOffset/pageYOffset
|
總為0 |
IE 6/7/8 當前頁面相對於窗口顯示區左上角的 X /Y位置，即水平/垂直滾動條已滾動的距離
IE 9 當前頁面相對於窗口顯示區左上角的 X /Y位置，即水平/垂直滾動條已滾動的距離 |
特別指出的是，在IE 9中，無論是否使用<!DOCTYPE>聲明顯示一個文檔，document.documentElement和document.body中的相關屬性的意義總是相同的。這點與IE 6/7/8表現不一樣。
綜合上表，以下是獲取瀏覽器窗口可視區域（不包括滾動條）和滾動條位置的代碼，它兼容主流瀏覽器（IE/Firefox/Chrome/Safari）：
// 獲取瀏覽器窗口的可視區域的寬度
function getViewPortWidth() {
return document.documentElement.clientWidth || document.body.clientWidth;
}
// 獲取瀏覽器窗口的可視區域的高度
function getViewPortHeight() {
return document.documentElement.clientHeight || document.body.clientHeight;
}
// 獲取瀏覽器窗口水平滾動條的位置
function getScrollLeft() {
return document.documentElement.scrollLeft || document.body.scrollLeft;
}
// 獲取瀏覽器窗口垂直滾動條的位置
function getScrollTop() {
return document.documentElement.scrollTop || document.body.scrollTop;
}