对网页元素Client,Offset和Scroll三种属性的理解
这两天在写一个js脚本文件来实现对网页内容的位置和大小控制，中间碰到了诸多问题，随着问题刨根问底抓取到了三个非常难以区分的属性：Client,Offset,Scroll，参考了许多资料，将我的理解描述如下。问题提出：直接用width属性不能够访问到元素的宽度。
<style type="text/css">/* <!]> */</style><script type="text/javascript">// <!]></script><div id="a"></div><input type="button" name="name" value="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。
页:
[1]