How to get width of a div in percentage using jQuery?

Question

I have a div, and I'd like to know if there's a way to get its width in percentage using jQuery.

Here's my code:

$(document).ready(function(){
   var f = $('.f').width();
      alert(f);    
});

I tried to use % as an argument like this width(%), but this is setting the width as % not getting the value in a percentage format. Can someone tell me what should I do to get in percentage instead?

Any help is profusely appreciated.

Fiddle

Width is only ever given as an absolute value in pixels. To convert this to `%` you need to get the width of the parent element and do some maths. — Rory McCrossan, Sep 13 '13 at 12:10

score 46 · Accepted Answer · answered Sep 13 '13 at 12:12

46

To use your example code...

$(document).ready(function(){
   var f = $(".f").width() / $('.f').parent().width() * 100;
   alert(f);    
});

Working jsfiddle...

answered Sep 13 '13 at 12:12

Reinstate Monica Cellio

25,975
6
51
67

3

+1 for this version for the use of `parent()`, over hard-coding a selector. – Rory McCrossan Sep 13 '13 at 12:14
1

Anyone struggling to calculate the width of element that have borders: add `parseFloat($('.f').css('border-width')) * 2` to the elements' width on the left side of the division – Bruno Peres Aug 21 '15 at 18:38
1

@BrunoPeres see jquery's method `outerWidth()` instead. – NonameSL Jun 04 '17 at 09:00

score 7 · Answer 2 · answered Sep 13 '13 at 12:10

7

If you want the width relative to the body:

var percent =  $('.f').width() / $('body').width() * 100;

console.log(Math.round(percent).toFixed(2));

Is this what you're asking for?

http://jsfiddle.net/aXRxP/5/

answered Sep 13 '13 at 12:10

Johan

35,120
54
178
293

score 1 · Answer 3 · answered Sep 13 '13 at 12:09

you will need to get viewport width and then calculate your element width percentage in accordance with viewport width.

var width = $('#someElt').width();
var parentWidth = $('#someElt').offsetParent().width(); // this will return parent element's width which also can be replaced with docuent to get viewport width
var percent = 100*width/parentWidth;

score 0 · Answer 4 · answered Sep 13 '13 at 12:13

$(document).ready(function(){
   var f = $('.f').width();
    var pw = $('.f').parent().width();
    var rate = (f/pw*100) + '%';
    $('.f').html( rate);    
});

it is parent item's with. So if you rate the .f div's width to parent item's width you get that value.

How to get width of a div in percentage using jQuery?

4 Answers4

Linked

Related