scrollWidth,clientWidth,offsetWidth区别

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

一个scrollWidth和clientWidth的例子：

在文本框内输入内容，当横向滚动条没出来前scrollWidth和clientWidth的值是一样的。当一行内容超
出文本框的宽度，就有横向滚动条出来了，scrollWidth的值就变了。
scrollWidth是对象实际内容的宽度。
clientWidth是对象看到的宽度（不含边线），这个例子里不会改变。

一个clientWidth和offsetWidth的例子：

offsetWidth的值总是比clientWidth的值大。
clientWidth是对象看到的宽度（不含边线）
offsetWidth是对象看到的宽度（含边线，如滚动条的占用的宽）

*{margin:0;padding:0;}
#wrap{width:480px;height:300px;background:#eee;padding:5px;border:5px solid #f00;margin-left:20px;overflow:auto;display:block;}

这段CSS代码中定义了元素的width,padding,margin,border,可以全面地测试这些属性与scrollWidth,clientWidth,offsetWidth之间的关系.

JavaScript代码

var wrap = document.getElementById(‘wrap’);
alert(‘clientWidth: ‘ wrap.clientWidth ‘;\r\n’ ‘offsetWidth: ‘ wrap.offsetWidth ‘;\r\n’ ‘scrollWidth: ‘ wrap.scrollWidth ‘;\r\n’ ‘style.width: ‘ wrap.style.width ‘;\r\n’);

javascript代码也很简单.关键是测试结果很神奇,首先是在内容没有超出DIV范围的情况下:

firefox中,整个DIV border实测为500宽,clientWidth: 490;offsetWidth: 500;scrollWidth: 490;

IE中,整个DIV border实测为480宽,clientWidth: 470;offsetWidth: 480;scrollWidth: 470;

再说内容超出DIV范围的情况(即出现竖滚动条):

firefox中,实际宽度没变,但clientWidth: 473;offsetWidth: 500;scrollWidth: 473;

IE中,实际宽度没变,clientWidth: 470;offsetWidth: 480;scrollWidth: 453;

通过将以上情况一对比,就看出些道道来了:

1,IE与firefox中,offsetWidth的值都是DIV区 border的实测宽度

2,当内容超出DIV范围时,IE与FF中scrollWidth的值都是DIV内容区宽度-滚动条的宽度

3,当内容超出DIV范围时,firefox中clientWidth的值会变得和scrollWidth的值一样;而IE中clientWidth的值不变.由此可见,在firefox中的clientWidth是指DIV的实际内容区,不包含滚动条的,而IE中它却包含滚动条

4,IE中clientWidth的值,包含滚动条,不包含padding;而Firefox恰好反过来了

4,DIV的margin值不会对scrollWidth,clientWidth,offsetWidth造成影响

但是,最重要的是为什么firefox与IE中DIV的实测宽度会不一样呢?原因如下:IE中为一个DIV设置宽高后,比如例子中的480,再为它加上border,此时border会向内延伸,又为它加上padding,这个padding还是会向内延伸,从而保持实测宽度始终是480——但firefox中却恰恰相反，border和padding都是向外延伸，所以实测宽度变成了width border padding