释放双眼，带上耳机，听听看~！
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高）
没有定义W3C的标准，则
**IE为： **
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
**Opera为： **
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2网页可见区域高： document.body.clientHeight
3网页可见区域宽： document.body.offsetWidth (包括边线的宽)
4网页可见区域高： document.body.offsetHeight (包括边线的高)
5网页正文全文宽： document.body.scrollWidth
6网页正文全文高： document.body.scrollHeight
7网页被卷去的高： document.body.scrollTop
8网页被卷去的左： document.body.scrollLeft
9网页正文部分上： window.screenTop
10网页正文部分左： window.screenLeft
11屏幕分辨率的高： window.screen.height
12屏幕分辨率的宽： window.screen.width
13屏幕可用工作区高度： window.screen.availHeight
14屏幕可用工作区宽度： window.screen.availWidth
15
(注意：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
HTML精确定位：scrollLeft、scrollWidth、clientWidth、offsetWidth
2
3
4
5
6
7
8
2scrollHeight ==> 获取对象的滚动高度
3scrollLeft ==> 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离（被卷去的左）
4scrollTop ==> 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离（被卷去的高）
5offsetLeft ==> 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
6offsetTop ==> 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
7offsetHeight ==> 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
8
event.clientX ==> 相对文档的水平座标
event.clientY ==> 相对文档的垂直座标
event.offsetX ==> 相对容器的水平坐标
event.offsetY ==> 相对容器的垂直坐标
document.documentElement.scrollTop ==> 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop ==> 相对文档的水平座标+垂直方向滚动的量
实现代码：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
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> <meta http-equiv="content-type" content="text/html; charset=gb2312">
6</meta></head>
7<body>
8<h2 align="center">请调整浏览器窗口大小</h2><hr />
9<form action="#" method="get" name="form1" id="form1">
10<!--显示浏览器窗口的实际尺寸-->
11浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"/><br />
12浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"/><br />
13</form>
14<script type="text/javascript">
15<!--
16var winWidth = 0;
17var winHeight = 0;
18
19//函数：获取尺寸
20function findDimensions() {
21
22 //获取窗口宽度
23 if (window.innerWidth) {
24 winWidth = window.innerWidth;
25 } else if ((document.body) && (document.body.clientWidth)) {
26 winWidth = document.body.clientWidth;
27 }
28
29 //获取窗口高度
30 if (window.innerHeight) {
31 winHeight = window.innerHeight;
32 } else if ((document.body) && (document.body.clientHeight)) {
33 winHeight = document.body.clientHeight;
34 }
35
36 //通过深入Document内部对body进行检测，获取窗口大小
37 if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
38 winHeight = document.documentElement.clientHeight;
39 winWidth = document.documentElement.clientWidth;
40 }
41
42 //结果输出至两个文本框
43 document.form1.availHeight.value = winHeight;
44 document.form1.availWidth.value = winWidth;
45}
46
47findDimensions();
48
49//调用函数，获取数值
50window.onresize = findDimensions;
51
52//-->
53</script>
54</body>
55</html>
56
附 HTML 测试代码：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<title>属性值测试</title>
5<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7<style type="text/css">
8/* reset */
9body, h1, h2, h3, p, dl, dt, dd, ul, ol, li, button, input, textarea, th, td{margin:0; padding:0;}
10body{font:12px/1.2 Arial, "宋体"; color:#333;vertical-align: middle;_background:url(about:blank) fixed;_height:100%;background:#FFF;}
11button, input, select, textarea, label{vertical-align:middle;}
12img{vertical-align:top; border:none;}
13ul, ol{list-style:none;}
14a{text-decoration:none; color:#474747; vertical-align:baseline; cursor:pointer;}
15a:hover{text-decoration:none; color:#f76f0e;}
16table{border-collapse:collapse; border-spacing:0;}
17b{font-weight: normal;}
18
19/* test */
20body{border:10px solid #6F6;}
21.wrapper{width:800px;height:500px;border:1px solid #F00;margin:0 auto;}
22.div1{margin-top:50px;border:1px solid #CCC;padding:10px;margin-left:10px;}
23.div2{margin-top:70px;border:1px solid #00F;}
24</style>
25<script type="text/javascript" src="js/jquery.js"></script>
26<script type="text/javascript">
27
28</script>
29</head>
30<body>
31 <div class="wrapper" id="wrapper">
32 <div class="div1" id="div1">
33 div1,div1,div1,div1,div1,div1,div1,div1,div1,
34 div1,div1,div1,div1,div1,div1,div1,div1,div1,div1
35 </div>
36 <div class="div2" id="div2">
37 div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,
38 <br/>
39 div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,
40 <br/>
41 div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,
42 <br/>
43 div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,
44 <br/>
45 div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,
46 </div>
47 </div>
48</body>
49</html>
50
汇总
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2function windowHeight() {
3 var myHeight = 0;
4 if (typeof(window.innerHeight) == 'number') {
5 //Non-IE
6 myHeight = window.innerHeight;
7 } else if (document.documentElement && (document.documentElement.clientHeight)) {
8 //IE 6+ in 'standards compliant mode'
9 myHeight = document.documentElement.clientHeight;
10 } else if (document.body && (document.body.clientHeight)) {
11 //IE 4 compatible
12 myHeight = document.body.clientHeight;
13 }
14 return myHeight;
15}
16/////////浏览器视口的宽度
17function windowWidth() {
18 var myWidth = 0;
19 if (typeof(window.innerWidth) == 'number') {
20 //Non-IE
21 myWidth = window.innerWidth;
22 } else if (document.documentElement && (document.documentElement.clientWidth)) {
23 //IE 6+ in 'standards compliant mode'
24 myWidth = document.documentElement.clientWidth;
25 } else if (document.body && (document.body.clientWidth)) {
26 //IE 4 compatible
27 myWidth = document.body.clientWidth;
28 }
29 return myWidth;
30}
31/**** 浏览器垂直滚动位置 ****/
32function scrollY() {
33 var de = document.documentElement;
34 return window.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
35}
36
37/**** 浏览器水平滚动位置 ****/
38function scrollX() {
39 var de = document.documentElement;
40 return window.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;
41}
42
43/**** 当前页面高度 ****/
44function pageHeight() {
45 return document.body.scrollHeight;
46}
47
48/**** 当前页面宽度 ****/
49function pageWidth() {
50 return document.body.scrollWidth;
51}
52
