以下内容仅作收藏用！
网页可见区域宽：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均无关
Example:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>Screen Size Test</title><script language="JavaScript" type="text/JavaScript" ><!--function displayScreenSize(){var bodyWidth =document.body.clientWidth; //网页可见区域宽 var bodyHeight =document.body.clientHeight; //网页可见区域高 var bodyWidthWithBorder =document.body.offsetWidth; //网页可见区域宽(包括边线的宽) var bodyHeightWithBorder=document.body.offsetHeight; //网页可见区域高(包括边线的宽) var bodyWidthWithScroll =document.body.scrollWidth; //网页正文全文宽 var bodyHeightWithScroll=document.body.scrollHeight; //网页正文全文高 var bodyTopHeight =document.body.scrollTop; //网页被卷去的上边距 var bodyLeftWidth =document.body.scrollLeft; //网页被卷去的左边距 var windowTopHeight =window.screenTop; //网页正文部分上边距 var windowLeftWidth =window.screenLeft; //网页正文部分左边距 var screenHeight =window.screen.height; //屏幕分辨率的高 var screenWidth =window.screen.width; //屏幕分辨率的宽 var screenAvailHeight =window.screen.availHeight; //屏幕可用工作区高度 var screenAvailWidth =window.screen.availWidth; //屏幕可用工作区宽度var Str="<p>";Str+="网页可见区域宽:<span class='data'>" +bodyWidth+"px</span><br>";Str+="网页可见区域高:<span class='data'>" +bodyHeight+"px</span><br>";Str+="网页可见区域宽(包括边线的宽):<span class='data'>" +bodyWidthWithBorder+"px</span><br>";Str+="网页可见区域高(包括边线的宽):<span class='data'>" +bodyHeightWithBorder+"px</span><br>";Str+="网页正文全文宽:<span class='data'>" +bodyWidthWithScroll+"px</span><br>";Str+="网页正文全文高:<span class='data'>" +bodyHeightWithScroll+"px</span><br>";Str+="网页被卷去的上边距:<span class='data'>" +bodyTopHeight+"px</span><br>";Str+="网页被卷去的左边距:<span class='data'>" +bodyLeftWidth+"px</span><br>";Str+="网页正文部分上边距:<span class='data'>" +windowTopHeight+"px</span><br>";Str+="网页正文部分左边距:<span class='data'>" +windowLeftWidth+"px</span><br>";Str+="屏幕分辨率的高:<span class='data'>" +screenHeight+"px</span><br>";Str+="屏幕分辨率的宽:<span class='data'>" +screenWidth+"px</span><br>";Str+="屏幕可用工作区高度:<span class='data'>" +screenAvailHeight+"px</span><br>";Str+="屏幕可用工作区宽度:<span class='data'>" +screenAvailWidth+"px</span><br>";Str+="</p>"document.getElementById('dispaly').innerHTML=Str;}// --></script><style type="text/css"><!--A:link {text-decoration: none;color: #ff0000;font-weight: normal;}A:visited {text-decoration: none;color: #ff6666;font-weight: normal;}A:active {text-decoration: none;color: #ff0000;font-weight: normal;}A:hover {text-decoration: underline;color: #ff0000;font-weight: normal;}.title {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 24px;font-weight: bold;color: #990000;}.display {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;}.data {color: #FF0000;font-weight: bold;}.foot {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;color: #5e5e5e;}--></style></head><body on resize= "javascript:displayScreenSize();" onload= "javascript:displayScreenSize();" ><span class="title">Screen Size Test</span><hr align="left" size="1" noshade><span class="display">Now we get the screen size about this browser </span><br><span class="display" id="dispaly"></span><hr align="left" size="1" noshade><p align="right"><span class="foot">Screen Size Test by <a href="http://apolloge.cnblogs.com/">apolloge</a> </span></p></body></html>
联系客服
