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

There was a very closely related question today: stackoverflow.com/questions/4105355 Read @bobince's answer for some background — Pekka
– Pekka, Commented Nov 5, 2010 at 20:38
Do you want to get the width property of the style attribute on the element, or also settings defined in CSS classes? — Pekka
– Pekka, Commented Nov 5, 2010 at 20:39

josh.trow · Accepted Answer · 2010-11-05 20:38:56Z

2

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.

answered Nov 5, 2010 at 20:38

josh.trow

4,90123 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:29:03Z

0

You need to read the stylesheet itself.

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

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Nov 5, 2010 at 20:41

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Comments

Robusto · Accepted Answer · 2010-11-05 20:49:07Z

0

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.

answered Nov 5, 2010 at 20:49

Robusto

32k8 gold badges59 silver badges79 bronze badges

2 Comments

Michael Martin-Smucker Over a year ago

Piss. The whole reason I was doing this was so that I could put a blur filter on the parent element "if lte IE 8" to mimic the CSS3 box-shadow look (see: martinsmucker.com/demo/ie_shadow2.html). :-/ This is a very helpful thing to know, though, thanks!

Adrian B Over a year ago

This is also in pixels, not actual CSS value if is 100% for example

Collectives™ on Stack Overflow

How do I get the CSS width value with Javascript?

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related