获取浏览器宽高JS

网页可见区域宽：document.body.clientWidth

网页可见区域高：document.body.clientHeight

网页可见区域宽：document.body.offsetWidth (包括边线的宽)

网页可见区域高：document.body.offsetHeight (包括边线的宽)

网页正文全文宽：document.body.scrollWidth

网页正文全文高：document.body.scrollHeight

网页被卷去的高：document.body.scrollTop

网页被卷去的左：document.body.scrollLeft

网页正文部分上：window.screenTop

网页正文部分左：window.screenLeft

屏幕分辨率的高：window.screen.height

屏幕分辨率的宽：window.screen.width

屏幕可用工作区高度：window.screen.availHeight

屏幕可用工作区宽度：window.screen.availWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE，FireFox 差异如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

－－－－－－－－－－－－－－－－－－－

技术要点

本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。

要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在IE下需要深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。

实现代码 <!——————————文件名：30.3.htm——————————>

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5 <title>请调整浏览器窗口</title>
 6 <meta http-equiv="content-type" content="text/html; charset=gb2312">
 7 </head>
 8 <body>
 9 <h2 align="center">请调整浏览器窗口大小</h2><hr>
10 <form action="#" method="get" name="form1" id="form1">
11 <!–显示浏览器窗口的实际尺寸–>
12 浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"><br>
13 浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"><br>
14 </form>
15 <script type="text/javascript">
16 <!–
17 var winWidth = 0;
18    var winHeight = 0;
19    function findDimensions() //函数：获取尺寸
20    {
21    //获取窗口宽度
22    if (window.innerWidth)
23    winWidth = window.innerWidth;
24    else if ((document.body) && (document.body.clientWidth))
25    winWidth = document.body.clientWidth;
26    //获取窗口高度
27    if (window.innerHeight)
28    winHeight = window.innerHeight;
29    else if ((document.body) && (document.body.clientHeight))
30    winHeight = document.body.clientHeight;
31    //通过深入Document内部对body进行检测，获取窗口大小
32    if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
33    {
34    winHeight = document.documentElement.clientHeight;
35    winWidth = document.documentElement.clientWidth;
36    }
37    //结果输出至两个文本框
38    document.form1.availHeight.value= winHeight;
39    document.form1.availWidth.value= winWidth;
40    }
41    findDimensions();
42    //调用函数，获取数值
43    window.onresize=findDimensions;
44 //–>
45 </script>
46 </body>
47 </html>

源程序解读

（1）程序首先建立一个表单，包含两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口大小的改变而变化。

（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。

（3）然后，在函数findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和宽度，并将二者保存在前述两个变量中。

（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。

（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。

（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。

Javascript:

IE中：

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

FireFox中：

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

Opera中：

document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

JS：

 1 alert(document.body.clientWidth);        //网页可见区域宽(body)
 2 alert(document.body.clientHeight);       //网页可见区域高(body)
 3 alert(document.body.offsetWidth);       //网页可见区域宽(body)，包括border、margin等
 4 alert(document.body.offsetHeight);      //网页可见区域宽(body)，包括border、margin等
 5 alert(document.body.scrollWidth);        //网页正文全文宽，包括有滚动条时的未见区域
 6 alert(document.body.scrollHeight);       //网页正文全文高，包括有滚动条时的未见区域
 7 alert(document.body.scrollTop);           //网页被卷去的Top(滚动条)
 8 alert(document.body.scrollLeft);           //网页被卷去的Left(滚动条)
 9 alert(window.screenTop);                     //浏览器距离Top
10 alert(window.screenLeft);                     //浏览器距离Left
11 alert(window.screen.height);                //屏幕分辨率的高
12 alert(window.screen.width);                 //屏幕分辨率的宽
13 alert(window.screen.availHeight);          //屏幕可用工作区的高
14 alert(window.screen.availWidth);           //屏幕可用工作区的宽

Jquery：

1 alert($(window).height());                           //浏览器当前窗口可视区域高度
2 alert($(document).height());                        //浏览器当前窗口文档的高度
3 alert($(document.body).height());                //浏览器当前窗口文档body的高度
4 alert($(document.body).outerHeight(true));  //浏览器当前窗口文档body的总高度 包括border padding margin
5 alert($(window).width());                            //浏览器当前窗口可视区域宽度
6 alert($(document).width());                        //浏览器当前窗口文档对象宽度
7 alert($(document.body).width());                //浏览器当前窗口文档body的宽度
8 alert($(document.body).outerWidth(true));  //浏览器当前窗口文档body的总宽度 包括border padding margin