首页 > 代码库 > JS:body元素对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft

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>