Hi, I am Mofei!
...

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.

December 18, 2012 at 08:24 PM

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];
}

I had so many questions while writing this—what’s your take?

Hi, I am Mofei

Coding, and living with intention.

Subscribe
© 2012–2026 Mofei·Privacy·Terms
Life compiled in code