Html Document窗口的尺寸和位置
<div class="postcontent"><div id="cnblogs_post_body">在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）：
<div class="cnblogs_Highlighter">// 获取浏览器窗口的可视区域的宽度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;}
页:
[1]