嘿, 我是Mofei!
33,162
How to Get Element Width and Height in JavaScript
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];
}
THE END

Did this post inspire any ideas? Share your thoughts in the comments!

Mofei's Friend

avatar
What's on your mind today?
No comments yet
Be the first to comment!

HI. I AM MOFEI!

NICE TO MEET YOU!