How can I get the inherited CSS value using Javascript?

Question

I'm trying to get the value of an inherited CSS property using Javascript. I haven't been able to find a comprehensive answer.

Example CSS:

div {
    width: 80%;
}

Example Markup:

<div id="mydiv"> Some text </div>

Using javascript (jQuery, or native), I need to get the width of the element-- not in pixels, but the string "80%".

$('#mydiv').css('width'); // returns in px
$('#mydiv')[0].style.width // empty string
getComputedStyle($('#mydiv')[0]).width // returns in px

The reason I need the value as a string is because I need to copy the style to another element. If it's declared as a percent, the other value needs to be a percent. If it's declared in px, the other value needs to be in px.

The real trick is that this property could be inherited, not declared explicitly on the element (as in my example).

Does anyone have any ideas?

Answer 1

What you are searching for is this quirksmode.org article. It proposes the function

function getStyle(el, styleProp)    {
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

Still, you should read that article carefully. They names of the styleProps are not really cross-browser, and you will see how different browsers handle this. Opera seems to have the best support for reporting the correct values.