How to Get Element Width and Height in JavaScript

Learn how to accurately get element width and height using getComputedStyle, overcoming the limitations of the style property.

When writing a JavaScript screenshot feature, I wanted to get the width of a div that hasn't defined any CSS, so I used:

var a=document.getElementById('dom').style.width

To my surprise, the value I got was undefined... WHY??

I tried offsetWidth but found it wasn't the value I wanted. I suddenly remembered seeing something like computerStyle, so I searched on Baidu and finally understood why.

style                  // Can only get an element's inline styles; internal and external styles cannot be retrieved using style.
currentStyle         // Can compensate for the shortcomings of style, but it only applies to IE.
getComputedStyle     // Has the same function as currentStyle, but it applies to FF, Opera, Safari, and Chrome.

After research, I found I can use getComputedStyle to retrieve:

getStyle: function(element,attr){
     return (el.currentStyle ? el.currentStyle : getComputedStyle(el, null))[attr];
}