js获取元素宽高误区

前一段时间看到了这样的代码
css

.s {
        width: 200px;
        height: 200px;
        background: red;
    }

html

<button id="btn">获取</button>
<div id="ss" class="s"></div>

js

window.onload = function() {
        var btn = document.getElementById("btn");
        var ss= document.getElementById("ss");
        btn.onclick = function() {
            console.log(ss.style.width);
        }
    }

光看代码其实看不出有什么错误，但是是获取不到width的值的！！！
因为通过style只能获取内联样式，如

<div id="ss" class="s" style="width: 100px"></div>

注意不要写成这样

<div id="ss" class="s" width="100px"></div>

其实获取元素的宽和高可以使用getBoundingClientRect或offsetWidth/offsetHeight
具体代码就不贴了，只要注意获取的并不是类似于style的width，而是包括padding以及边框，演示地址http://jsrun.net/JkiKp/edit