js中clientWidth, scrollWidth, innerWidth, outerWidth和offsetWidth属性的区别

js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总，测试浏览器：ie7~ie11、chrome 和 firefox等。

 

一、测试1：无滚动条时，dom对象的offsetWidth、clientWidth和scrollWidth

（1）测试代码

 

（2）测试结果

 

IE7下，scrollWidth = 20，scrollHeight = 34

（3）图解结果

 

二、测试2：有滚动条时，dom对象offsetWidth、clientWidth 和 scrollWidth

（1）测试代码

 

（2）测试结果
这里我们需要读取外层带滚动条的 div#b1 的值。ie7~ie11、chrome 和 firefox 结果一致，如下：

 

（3）图解结果

 

三、测试3：window对象的 outerWidth、innerWidth、pageXOffset 和 screenLeft（screenX）

（1）测试代码

 

（2）图解结果（不同浏览器下，console 输出与下图部分有不同）