ansaurus

Question

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)

Answer 1

+1 A:

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"&gt;&lt;/script&gt;
</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 2010-08-21 11:20:35

I don't think this is what the OP needs.

Pekka 2010-08-21 11:28:32

@pekka: Care to elaborate? Maybe I am misunderstanding him

data 2010-08-21 11:31:48

@data If I read him correctly, he is looking for the *originally specified* with, not the effective pixel width.

Pekka 2010-08-21 11:36:34

@pekka: Then read what I wrote again. This gives me 10%, not some pixel width. But maybe I made an error somewhere

data 2010-08-21 11:46:31

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 2010-08-21 11:53:55

@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 2010-08-21 12:36:16

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 2010-08-21 13:57:22

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 2010-08-22 21:21:27

Answer 2

A:

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 2010-08-22 21:48:52

ansaurus

tags:

views:

answers:

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)

related questions