getBoundingClientRect vs getComputedStyle
HTML
<div id="outer">
<div id="inner">
</div>
</div>
<div id="output">
</div>
CSS
#outer{
width:18px;
}
#inner{
width:90%;
}
JavaScript
var inner = document.getElementById("inner");
var output = document.getElementById("output");
var boundingRectWidth = inner.getBoundingClientRect().width;
var computedWidth = parseFloat(window.getComputedStyle(inner).width);
output.innerHTML="getBoundingClientRect: "+boundingRectWidth+"<p>computedWidth : "+computedWidth;