jQuery - find out the width of an element as specified in CSS (e.g. in %age if it was specified in %age, not just in px)

A

2

12

Similar to this question: get CSS rule's percentage value in jQuery

However, I am writing a plugin and it needs to deal with it gracefully dependent on how the width was originally specified. If the element was originally specified in pixels it is fine as that is the value that .width(), .innerWidth(), outerWidth() and .css('width') return.

But I want to know if it was original set as a percentage. So that if the container element resizes then I know to recalculate the width that I have set on my element.

Is this possible? The only thing I can think of is trying to loop through document.stylesheets looking for relevant rules but I think that will be more or less impossible to do generically. Any other ideas?

Thanks!

Amentia answered 21/8, 2010 at 11:9 Comment(2)

Are you sure that .css('width') doesn't return the property as a string? How else would you get the auto value? – Capsular 21/8, 2010 at 11:35

It didn't seem to from my experiments (and from the answer below it sounds like this might be browser depandant). Thanks for the answer tho :) – Amentia 22/8, 2010 at 20:15

A

2

I couldn't find a way to do what I asked for in the question but I came up with a workaround which allows me to do what I need to in my situation. The code in question is for my jQuery plugin called jScrollPane ( http://jscrollpane.kelvinluck.com/ ). In the end what I do is set the width to null (elem.css('width', null);). This removes the width I had set myself previously and allows the element to take it's natural width as defined in the stylesheet (i.e. using a percentage if that's how it was defined). I can then measure this new value and use that to set the width to the number I desire...

Amentia answered 22/8, 2010 at 21:48 Comment(0)

O

5

It seems like .css('width') works for me.

Small example to show this works:

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>

<div style="width:10%;" id="foo"></div>
<script>
alert($("#foo").css('width'));
</script>

</body>
</html>

This gives me an output of "10%". Hope I didn't miss anything obvious.

Otoole answered 21/8, 2010 at 11:20 Comment(9)

I don't think this is what the OP needs. – Slut 21/8, 2010 at 11:28

@pekka: Care to elaborate? Maybe I am misunderstanding him – Otoole 21/8, 2010 at 11:31

@Otoole If I read him correctly, he is looking for the originally specified with, not the effective pixel width. – Slut 21/8, 2010 at 11:36

@pekka: Then read what I wrote again. This gives me 10%, not some pixel width. But maybe I made an error somewhere – Otoole 21/8, 2010 at 11:46

It depends on the browser. On IE jQuery uses currentStyle which gives you the specified width. On other browsers it uses getComputedStyle which gives you the computed style, which is resolved from % to px. – Sosthenna 21/8, 2010 at 11:53

@bobince: Thanks, that clears some of the confusion. Just for the record: Chromium 5 also returns the specified width. But in my opinion, this somewhat sounds like a bug in JQuery to me, albeit not a neccessarily solvable one. – Otoole 21/8, 2010 at 12:36

Actually I've just looked and this particular example will work, because jQuery also returns the specified value if it's set on an inline style (style="width: 10%"). This won't work for stylesheet styles. This kind of thing is fairly typical of jQuery's Do What I Mean approach, trying to hide fundamental browser and conceptual differences (see also the horror that is attr()). It's inevitably a leaky abstraction, making the errors all the more confusing. – Sosthenna 21/8, 2010 at 13:57

Thanks for the clarification bobince - I was pretty sure I'd tried css('width') and it hadn't worked. I'll add an answer below with the approach I ended up using... – Amentia 22/8, 2010 at 21:21

I het 96px instead of 10%! How to get 10%? Thanks – Zellner 9/6, 2020 at 17:59

A

2

I couldn't find a way to do what I asked for in the question but I came up with a workaround which allows me to do what I need to in my situation. The code in question is for my jQuery plugin called jScrollPane ( http://jscrollpane.kelvinluck.com/ ). In the end what I do is set the width to null (elem.css('width', null);). This removes the width I had set myself previously and allows the element to take it's natural width as defined in the stylesheet (i.e. using a percentage if that's how it was defined). I can then measure this new value and use that to set the width to the number I desire...

Amentia answered 22/8, 2010 at 21:48 Comment(0)

Recommended topics

Hot tags