对网页元素Client,Offset和Scroll三种属性的理解

这两天在写一个js脚本文件来实现对网页内容的位置和大小控制，中间碰到了诸多问题，随着问题刨根问底抓取到了三个非常难以区分的属性：Client,Offset,Scroll，参考了许多资料，将我的理解描述如下。

 

问题提出：直接用width属性不能够访问到元素的宽度。

<style type="text/css">
/* <![CDATA[ */
	#a
{
	width:100px;
	height:30px;
	border:solid blue 1px;
}
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
	function getWidth()
{
	var bar=document.getElementById("a");
	alert(bar.style.width);
}
// ]]>
</script>
<div id="a">
</div>
<input type="button" name="name" value="GetWidth" onclick="getWidth()" />

 这样获取不到a块的宽度，搜索之，得到的结论是：当元素宽度是css单独制定的时候，通过这种手段将不能够成功取得其宽度值，但是可以设置。看到这两篇博客，他们的解决办法是采用offsetWidth属性来代替style.width。

http://www.woaicss.com/article/js/jss.htm

http://www.45it.com/javascript/201202/28426.htm

当资料查到这里就很疑惑了，为什么是offsetWidth,这个真的是元素的宽度吗？于是进一步往下查，发现并不是这样的，offsetWidth并不一定就是你想要的宽度值。除了offset，我将三个功能类似的属性offset,client,scroll一并做了了解，对比如下，都包含有*Height,*Width,*Top.*Left四个属性。

 

Height和Width表示元素块的高度和宽度。

client：包含padding，不包含border,margin和scrollbar部分

offset：包含padding和border，但是不包含margin和scrollbar部分

scroll：包含元素的所有部分。

 

Top和Left是用于表示元素的位置。

clientLeft：通常指元素的左边框的宽度

offsetLeft：与最近的父元素的距离（横向）

scroll：卷起来的距离，如果没有出现scrollbar，那么这个值始终为0。

 

所以说，如果不想要计算元素的边框所占用的宽度，上面的这个例子应该使用clientWidth，而不是offsetWidth。