scrollWidth,clientWidth,offsetWidth测试

今天突然有兴趣研究一下javascript中scrollWidth,clientWidth,offsetWidth等的区别,但在firefox与IE中测试却发现了很大差距.在网上搜索了一下,发现大部分都是转载的同一篇文章,而这篇文章还是2007年的,当时firefox才1.0,IE5还活在世上….所以我觉得我现在有必要重写一篇文章了.

CSS代码

*{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

到底是向内还是向外,两个浏览器差异如此之大真让人蛋疼。不过,我觉得firefox的解析才是正确的。

发表评论

电子邮件地址不会被公开。