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

1.div里面包裹text

HTML:

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.......

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:

	

		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.......
	

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:

结果：

                       

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