情景一，元素style属性设置了width/height
复制代码 代码如下:
test
如上，使用el.style.width即可。如果没有在style属性中设置width，那么使用el.style.width将获取不到，如下
复制代码 代码如下:
test
所有浏览器中弹出的是空字符串。即使将样式嵌在页面的css中也仍然获取不到，如下
复制代码 代码如下:
test
这时候getcomputedstyle或currentstyle将会派上用场。
情景二，元素通过引入样式表设置width/height
有两种方式引入样式表，一是使用link标签引入单独的css文件，二是直接在html页面中使用style标签。这里使用第二种方式测试。如下
复制代码 代码如下:
test
所有浏览器中均弹出了100px。说明通过getcomputedstyle和currentstyle可以获取到元素被定义在样式表中的宽高。
那如果元素即没有在style属性中设置宽高，也没有在样式表中设置宽高，还能用getcomputedstyle或currentstyle获取吗？答案是getcomputedstyle可以，currentstyle不可以。如下
复制代码 代码如下:
test
div 既没有设置style属性，也没有引入样式表。在firefox/ie9/safari/chrome/opera中可以获取到宽高（浏览器默认），但ie6/7/8中却不行，返回的是auto。
注意，这里getstyle方法优先使用getcomputedstyle，而ie9已经支持该方法。因此ie9中可以获取到宽高。但ie6/7/8不支持，只能使用currentstyle获取。
情景三，元素既没有设置style属性，也没有引入样式表
复制代码 代码如下:
test
思路很简单：获取元素的offsetwidth/offsetheight，减去元素的padding和border。