JavaScript-offsetWidth,clientWidth,scrollWidth，及对应top、left区别及实测结果

1.div里面包裹text

HTML:

<div class="outerdiv">
BEIJING - A new round of smog is likely to hit Beijing and neighboring regions Saturday night and will stay for at least four days, the local weather bureau said Saturday.......
</div>

CSS:

             *{
			margin:0;
			padding:0;
		}
		.outerdiv{
			overflow: scroll;
			border:1px solid #DDD;
			width:300px;
			height:300px;
			margin:100px 50px;
			font-size: 10pt;
		}

JS:

                var eldiv=document.getElementsByClassName("outerdiv")[0];
		console.log('clientWidth: '+eldiv.clientWidth);
		console.log('offsetWidth: '+eldiv.offsetWidth);
		console.log('scrollWidth: '+eldiv.scrollWidth);
		console.log('clientTop: '+eldiv.clientTop);
		console.log('offsetTop: '+eldiv.offsetTop);
		console.log('scrollTop: '+eldiv.scrollTop);
		console.log('clientLeft: '+eldiv.clientLeft);
		console.log('offsetLeft: '+eldiv.offsetLeft);
		console.log('scrollLeft: '+eldiv.scrollLeft);

结果：

      FireFox & Chrome & IE

             

 

结论： clientWidth与scrollWidth 仅仅指内容宽度，不包括滚动条和边框。 offsetWidth指内容+滚动条+边框 宽度。offsetTop与offsetLeft指边框到父元素的距离，本例子中与     margin值相同。clientTop与clientLeft与border宽度相同。scrollTop与scrollLeft与滚动条上下或左右滚动的宽度大小相同。

2. outerdiv包裹innerdiv，innerdiv包裹text

HTML:

<div class="outerdiv">
	<div class="innerdiv">
		BEIJING - A new round of smog is likely to hit Beijing and neighboring regions Saturday night and will stay for at least four days, the local weather bureau said Saturday.......
	</div>
</div>

CSS:

              *{
			margin:0;
			padding:0;
		}
		.outerdiv{
			overflow: scroll;
			border:1px solid #DDD;
			width:300px;
			height:300px;
			margin:100px 50px;
			font-size: 10pt;
		}
		.innerdiv{
			width:500px;
			height:500px;
		}

JS:

<script>
		var eldiv=document.getElementsByClassName("outerdiv")[0];
		var txdiv=document.getElementsByClassName("innerdiv")[0];
		console.log('outer div');
		console.log('clientWidth: '+eldiv.clientWidth);
		console.log('offsetWidth: '+eldiv.offsetWidth);
		console.log('scrollWidth: '+eldiv.scrollWidth);
		console.log('clientTop: '+eldiv.clientTop);
		console.log('offsetTop: '+eldiv.offsetTop);
		console.log('scrollTop: '+eldiv.scrollTop);
		console.log('clientLeft: '+eldiv.clientLeft);
		console.log('offsetLeft: '+eldiv.offsetLeft);
		console.log('scrollLeft: '+eldiv.scrollLeft);
		console.log('inner div');
		console.log('clientWidth: '+txdiv.clientWidth);
		console.log('offsetWidth: '+txdiv.offsetWidth);
		console.log('scrollWidth: '+txdiv.scrollWidth);
		console.log('clientTop: '+txdiv.clientTop);
		console.log('offsetTop: '+txdiv.offsetTop);
		console.log('scrollTop: '+txdiv.scrollTop);
		console.log('clientLeft: '+txdiv.clientLeft);
		console.log('offsetLeft: '+txdiv.offsetLeft);
		console.log('scrollLeft: '+txdiv.scrollLeft);
	</script>

结果：

                       

outer div各项值与1中结果相同