Get the width of an element in the units defined in the CSS

Question

Lets say I have:

.item {
    width: 33%;
}

The thing is that if with jQuery I have to retrieve width:

$('.item').first().css('width')

It returns the actual width in pixels,

How can I get the % ? Do I have to calculate based on the actual parent's width?

unfortunately yes, you need to calculate. See this http://stackoverflow.com/questions/18785951/how-to-get-width-of-a-div-in-percentage-using-jquery — Bhushan Kawadkar, Jul 04 '14 at 10:07
@ToniMichelCaubet yes! Was beautiful, took the long winding road down to the Cala and had lunch at the restaurant on the right! It was beautiful! — Rob Schmuecker, Jul 04 '14 at 10:33

score 1 · Accepted Answer · answered Jul 04 '14 at 10:07

you have to do calculations

100 * (element width / parent element width)

var el = $('.item').first(),
    width = (100 * parseFloat(el.css('width')) / parseFloat(el.parent().css('width'))) + '%';

or

var el = $('.item').first(),
    width = (100 * parseFloat(el.width()) / parseFloat(el.parent().width())) + '%';

1 Answers1