JS：body元素对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft
document.body.clientWidth
获取body元素对象的内容可视区域的宽度，即clientWidth=width+padding，不包括滚动条。
document.body.clientHeight
获取body元素对象的内容可视区域的高度，即clientHeight=height+padding，不包括滚动条。
浏览器兼容性
在IE7中，如果给body设置滚动条的话，滚动条是出现在body内部的。所以当给body设置width和height时，在IE7中clientWidth和clientHeight的值是要比其它浏览器中的值小一些的。
document.body.offsetWidth
获取body元素对象的宽度，即offsetWidth=width+padding+border，也可以写成offsetWidth=clientWidth+border。
document.body.offsetHeight
获取body元素对象的高度，即offsetHeight=height+padding+border，也可以写成offsetHeight=clientHeight+border。
浏览器兼容性
在IE7中，如果给body设置滚动条的话，滚动条是出现在body内部的。所以offsetWidth和offsetHeight的值还需要加上滚动条的宽度。当然最终的值和其它浏览器是一样的。
document.body.scrollWidth
获取body元素对象内容的实际宽度，即对象的滚动宽度。
document.body.scrollHeight
获取body元素对象内容的实际高度，即对象的滚动高度。
浏览器兼容性
- 在FireFox和IE中，其获取的就是body元素对象内部内容的实际宽高。
- 在Chrome、Safari、Opera中，scrollWidth和scrollHeight获取的是整个页面文档的滚动宽高。
document.body.clientLeft
获取body元素对象的左边框的宽度。
document.body.clientTop
获取body元素对象的上边框的宽度。
浏览器兼容性
各浏览器表现一致。
document.body.offsetLeft
获取body元素对象相对于自身的位置。
document.body.offsetTop
获取body元素对象相对于自身的位置。
浏览器兼容性
- 在Chrome、Opera、Safari、IE8、IE9和IE10中，工作正常，offsetLeft和offsetTop的值都为0。
- 在FireFox中，offsetLeft和offsetTop的值为负的body元素的border-width。
- 在IE7中，offsetLeft和offsetTop指的是body元素对象的边框（不包括边框）到页面文档边缘的距离。
document.body.scrollLeft
获取页面文档向右滚动过的像素数。
document.body.scrollTop
获取页面文档向下滚动过的像素数。
浏览器兼容性
- 在FireFox、IE8、IE9和IE10中，scrollLeft和scrollTop的值始终为0。
- 在IE7中，scrollLeft和scrollTop的值为body元素对象最顶端和对象内容的最顶端之间的距离，即滚动条滚过的距离。
本文所用的测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>鬼眼邪神的博客</title>
<meta name="author" content="鬼眼邪神"/>
<meta name="description" content="博客地址http://cyg7561.blog.163.com/"/>
<style>
*{
margin:0;
padding:0;
}
html {
margin:20px;
padding:20px;
width:600px;
border:10px solid #000;
}
body {
margin:0 0 0 100px;
width:400px;
height:800px;
border:5px solid #000;
background:yellow;
overflow:scroll;
}
.green {
position:relative;
margin:50px auto;
padding:20px;
width:80px;
height:80px;
border:10px solid #000;
background:rgb(0,255,0);
}
.con {
margin:0 auto;
width:380px;
}
</style>
<script>
(function(){
window.onload=function (){
var con=document.getElementById("con");
var green=document.getElementById("green");
var body=document.getElementById("body");
document.onclick=function (event){
var event=window.event||event;
con.innerHTML=
"document.body.clientWidth="+document.body.clientWidth+"，"+
"document.body.clientHeight="+document.body.clientHeight+"<br/>"+
"document.body.offsetWidth="+document.body.offsetWidth+"，"+
"document.body.offsetHeight="+document.body.offsetHeight+"<br/>"+
"document.body.scrollWidth="+document.body.scrollWidth+"，"+
"document.body.scrollHeight="+document.body.scrollHeight+"<br/>"+
"document.body.clientLeft="+document.body.clientLeft+"，"+
"document.body.clientTop="+document.body.clientTop+"<br/>"+
"document.body.offsetLeft="+document.body.offsetLeft+"，"+
"document.body.offsetTop="+document.body.offsetTop+"<br/>"+
"document.body.scrollLeft="+document.body.scrollLeft+"，"+
"document.body.scrollTop="+document.body.scrollTop+"<br/>";
}
}
})();
</script>
</head>
<body>
<div class="green" id="green">
<div class="red"></div>
</div>
<div class="con" id="con"></div>
</body>
</html>JS：body元素对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft,古老的榕树,5-wow.com
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
