How do I get the CSS width value with Javascript?

Question

I'm trying to calculate the width of an element so that when I use JavaScript to wrap a parent element around it, I can set the width of the parent to match the width of the child. The obvious $('#element').css('width'); isn't quite what I want because it only seems to return the calculated value in pixels. Is there some way that I can return the actual CSS value, whether it be 300px or 20% or auto, instead of the calculated value?

Here's generally how it's set up, but I'd like to know the CSS value of #child instead of the calculated value.

$(document).ready(function(){
    $('#child').wrap('<div id="parent"></div>');
    $('#parent').each(function(){
        var childWidth = $(this).children('#child').css('width');
        $(this).css('width', childWidth)
    });
});

Answer 1

I don't believe you can do that. The best you will get is offsetWidth or clientWidth which return the calculated value, with and without counting margins, padding and borders.

Answer 2

You need to read the stylesheet itself.

See: How can I read out the CSS text via Javascript as defined in the stylesheet?

Answer 3

Everyone but IE supports window.getComputedStyle(element), which you can use like so:

getComputedStyle($('#child')).width; // returns actual width of #child

Doesn't help you with IE, though.