Html Document窗口的尺寸和位置

hencehong · 发表于 2012-12-22 21:31:24

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

		自动登录	找回密码
密码			立即注册