在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;
}
