Is it possible to use jQuery to get the width of an element in percent or pixels, based on what the developer specified with CSS?

I'd say the best way is to compute it yourself:

var width = $('#someElt').width();
var parentWidth = $('#someElt').offsetParent().width();
var percent = 100*width/parentWidth;

It's most definitely possible!

You must first hide() the parent element. This will prevent JavaScript from calculating pixels for the child element.

$('.parent').hide();
var width = $('.child').width();
$('.parent').show();
alert(width);

See my example.


I think you can use stylesheet ('style') object access directly. Even then, YMMV by browser. e.g. elm.style.width.

Edit for Peter's comment:: I am not looking to 'get a %'. As per the question:

I need to be able to do is determine the width of an element that the user specifies ... [is there a way to] output the width of an element in px or % depending on what the developer has given it with CSS?

Thus I provided an alternative to retrieve the "raw" CSS value. This appears to work on FF3.6. YMMV elsewhere (netadictos's answer may be more portable/universal, I do not know). Again, it is not looking to 'get a %'.

Tags:

Css

Jquery

Width