获得浏览器窗口的尺寸
一、对于IE9+、Chrome、Firefox、Opera以及Safari
浏览器窗口的内部高度： window.innerHeight
浏览器窗口的内部宽度： window.innerWidth
二、对于Internet Explorer8、7、6、5
表示HTML文档所在窗口的当前高度： document.documentElement.clientHeight
表示HTML文档所在窗口的当前宽度： document.documentElement.clientWidth
或者
Document对象的body属性对应HTML文档的<body>标签
document.body.clientHeight
document.body.clientWidth
在不同浏览器都实用的JavaScript方案：
var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;
示例：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <script type="text/javascript"> var w=document.documentElement.clientWidth||document.body.clientWidth; var h=document.documentElement.clientHeight||document.body.clientHeight; document.write(w+"*"+h+"<br>") var w=document.documentElement.clientWidth; var h=document.documentElement.clientHeight; document.write(w+"*"+h+"<br>") var w=window.innerWidth; var h=window.innerHeight; document.write(w+"*"+h+"<br>") //document.body.clientHeight的值很奇怪很小，其实是因为代码从上往下执行，当前body里有多少内容，高度就是被这些内容撑高的，如果你把它写在最前面，可能取到的是0，因为当前还没有内容 var w=document.body.clientWidth; var h=document.body.clientHeight; document.write(w+"*"+h) </script> </body> </html>
网页尺寸scrollHeight
scrollHeight和scrollWidth，获取网页内容高度和宽度。
一、针对IE、Opera
scrollHeight是网页内容实际高度，可以小于clientHeight
二、针对NS、FF
scrollHeight是网页内容高度,不过最小值是clientHeight。
也就是说网页内容实际高度小于clientHeight时，scrollHeight返回clientHeight。
三、浏览器兼容性
var w=document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h=document.documentElement.scrollHeight
|| document.body.scrollHeight;
注意：区分大小写
scrollHeight和scrollWidth还可以获取Demo元素中内容实际占用的高度和宽度。
网页尺寸offsetHeight
offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。
一、值
offsetHeight = clientHeight + 滚动条 + 边框。
二、浏览器兼容性
var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;
网页卷去的距离和偏移量
scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离，即左边灰色的内容。
scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离，即上边灰色的内容。
offsetLeft:获取指定对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置。
offsetTop:获取指定对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置。
注意：
1、区分大小写
2、offsetParent：布局中设置postion属性（Relative、Absolute、fixed）的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。
示例：调整横竖滚动条后，点击按钮后，查看offsetTop、offsetLeft、scrollTop、scrollLeft值的变化。
<!DOCTYPE HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> function req(){ var div = document.getElementById("div1"); document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1距离屏幕顶部的距离 document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1距离屏幕左部的距离 document.getElementById("li3").innerHTML = (div.scrollTop)+"px";//div1纵向滚动条滚动的距离 document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1横向滚动条滚动的距离 } </script> </head> <body style="border:10px solid #ccc;padding:0px 0px;margin:5px 10px"> <div style="width:60%;border-right:1px dashed red;float:left;"> <div style="float:left;"> <div id="div1" style="border:5px red solid;height:300px;width:200px;overflow:auto"> <div style="height:500px;width:400px">请调整横竖滚动条后，点击按钮后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div> </div> <input type="button" value="点击我!" onclick="req()" style="border: 1px solid purple;height: 25px;"/> </div> </div> <div style="width:30%;float:left;"> <ul style="list-style-type: none; line-height:30px;">结果： <li>offsetTop : <span id="li1"></span></li> <li>offsetLeft : <span id="li2"></span></li> <li> scrollTop : <span id="li3"></span></li> <li>scrollLeft : <span id="li4"></span></li> </ul> </div> <div style="clear:both;"></div> </body> </html>
