javascript 中 offsetWidth 是什么意思？

http://hi.baidu.com/%C7%A7%D4%D8%C6%DA%C5%CE/blog/item/1f8dfafd592e8e40d6887d12.html

 

 

javascript 中 offsetWidth 是什么意思？

 

最佳答案：是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变

 

 

scrollWidth, clientWidth与offsetWidth的区别

 

 

scrollWidth 是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）。clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。 offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。 一个scrollWidth和clientWidth的例子：

 

 

 

<div id="demo"
	style="overflow: hidden; width: 460px; color #ffffff; height: 120px">
<table height="120" cellPadding="0" width="600" align="right" border="0"
	cellspacing="0">
	<tr>
		<td id=demo1 vAlign=top width=543>
		<table borderColor="#ffffff" cellSpacing="2" cellPadding="0"
			width="50" border="1">
			<tr>
				<td>dddd</td>
			</tr>
		</table>
		</td>
		<td id=demo2 vAlign=top width=47></td>
	</tr>
</table>
</div>
<script type="text/javascript">
var speed = 1;// 速度数值越大速度越慢
demo2.innerHTML = demo1.innerHTML;
function Marquee() {
	if (demo2.offsetWidth - demo.scrollLeft <= 0) {
		/* scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。 */
		demo.scrollLeft -= demo1.offsetWidth;
	} else {
		demo.scrollLeft++;
	}
}
var MyMar = setInterval(Marquee, speed);
demo.onmouseover = function() {
	clearInterval(MyMar);
}
demo.onmouseout = function() {
	MyMar = setInterval(Marquee, speed);
}
</script>

 

 

 

 clientWidth、offsetWidth、clientHeight..区别

 

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均无关)

offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width
clientwidth：是元素的可见宽度。等于padding+width
scrollwidth:是元素的宽度且包括滚动部分。