原文:http://blog.snsgou.com/post-574.html
![](http://blog.snsgou.com/content/uploadfile/201501/o_client-offset-scroll.jpg)
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高)
网页可见区域宽: 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
(注意:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
HTML精确定位:scrollLeft、scrollWidth、clientWidth、offsetWidth
scrollWidth ==> 获取对象的滚动宽度
scrollHeight ==> 获取对象的滚动高度
scrollLeft ==> 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离(
被卷去的左)
scrollTop ==> 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离(
被卷去的高)
offsetLeft ==> 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop ==> 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetHeight ==> 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
event.clientX ==> 相对文档的水平座标
event.clientY ==> 相对文档的垂直座标
event.offsetX ==> 相对容器的水平坐标
event.offsetY ==> 相对容器的垂直坐标
document.documentElement.scrollTop ==> 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop ==> 相对文档的水平座标+垂直方向滚动的量
实现代码:
01 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
02 | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > |
03 | <html xmlns= "http://www.w3.org/1999/xhtml" > |
05 | <title>请调整浏览器窗口</title> <meta http-equiv= "content-type" content= "text/html; charset=gb2312" > |
08 | <h2 align= "center" >请调整浏览器窗口大小</h2><hr /> |
09 | <form action= "#" method= "get" name= "form1" id= "form1" > |
11 | 浏览器窗口 的 实际高度: <input type= "text" name= "availHeight" size= "4" /><br /> |
12 | 浏览器窗口 的 实际宽度: <input type= "text" name= "availWidth" size= "4" /><br /> |
14 | <script type= "text/javascript" > |
20 | function findDimensions() { |
23 | if (window.innerWidth) { |
24 | winWidth = window.innerWidth; |
25 | } else if ((document.body) && (document.body.clientWidth)) { |
26 | winWidth = document.body.clientWidth; |
30 | if (window.innerHeight) { |
31 | winHeight = window.innerHeight; |
32 | } else if ((document.body) && (document.body.clientHeight)) { |
33 | winHeight = document.body.clientHeight; |
37 | if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) { |
38 | winHeight = document.documentElement.clientHeight; |
39 | winWidth = document.documentElement.clientWidth; |
43 | document.form1.availHeight.value = winHeight; |
44 | document.form1.availWidth.value = winWidth; |
50 | window.onresize = findDimensions; |
附 HTML 测试代码:
01 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
02 | < html xmlns = "http://www.w3.org/1999/xhtml" > |
05 | < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> |
06 | < meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" > |
07 | < style type = "text/css" > |
09 | body, h1, h2, h3, p, dl, dt, dd, ul, ol, li, button, input, textarea, th, td{margin:0; padding:0;} |
10 | body{font:12px/1.2 Arial, "宋体"; color:#333;vertical-align: middle;_background:url(about:blank) fixed;_height:100%;background:#FFF;} |
11 | button, input, select, textarea, label{vertical-align:middle;} |
12 | img{vertical-align:top; border:none;} |
13 | ul, ol{list-style:none;} |
14 | a{text-decoration:none; color:#474747; vertical-align:baseline; cursor:pointer;} |
15 | a:hover{text-decoration:none; color:#f76f0e;} |
16 | table{border-collapse:collapse; border-spacing:0;} |
17 | b{font-weight: normal;} |
20 | body{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;} |
25 | < script type = "text/javascript" src = "js/jquery.js" ></ script > |
26 | < script type = "text/javascript" > |
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 |
36 | < div class = "div2" id = "div2" > |
37 | div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2, |
39 | div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2, |
41 | div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2, |
43 | div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2, |
45 | div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2, |
汇总
02 | function windowHeight() { |
04 | if ( typeof (window.innerHeight) == 'number' ) { |
06 | myHeight = window.innerHeight; |
07 | } else if (document.documentElement && (document.documentElement.clientHeight)) { |
09 | myHeight = document.documentElement.clientHeight; |
10 | } else if (document.body && (document.body.clientHeight)) { |
12 | myHeight = document.body.clientHeight; |
17 | function windowWidth() { |
19 | if ( typeof (window.innerWidth) == 'number' ) { |
21 | myWidth = window.innerWidth; |
22 | } else if (document.documentElement && (document.documentElement.clientWidth)) { |
24 | myWidth = document.documentElement.clientWidth; |
25 | } else if (document.body && (document.body.clientWidth)) { |
27 | myWidth = document.body.clientWidth; |
33 | var de = document.documentElement; |
34 | return window.pageYOffset || (de && de.scrollTop) || document.body.scrollTop; |
39 | var de = document.documentElement; |
40 | return window.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft; |
44 | function pageHeight() { |
45 | return document.body.scrollHeight; |
50 | return document.body.scrollWidth; |