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!

Community
  • 1
  • 1
vitch
  • 3,215
  • 3
  • 25
  • 26
  • Are you _sure_ that `.css('width')` doesn't return the property as a string? How else would you get the `auto` value? – Eric Aug 21 '10 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 :) – vitch Aug 22 '10 at 20:15

2 Answers2

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.

data
  • 2,493
  • 2
  • 19
  • 21
  • I don't think this is what the OP needs. – Pekka Aug 21 '10 at 11:28
  • @pekka: Care to elaborate? Maybe I am misunderstanding him – data Aug 21 '10 at 11:31
  • 1
    @data If I read him correctly, he is looking for the *originally specified* with, not the effective pixel width. – Pekka Aug 21 '10 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 – data Aug 21 '10 at 11:46
  • 6
    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`. – bobince Aug 21 '10 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. – data Aug 21 '10 at 12:36
  • 10
    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. – bobince Aug 21 '10 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... – vitch Aug 22 '10 at 21:21
  • I het 96px instead of 10%! How to get 10%? Thanks – user1788736 Jun 09 '20 at 17:59
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...

vitch
  • 3,215
  • 3
  • 25
  • 26