get css width of an element and convert it to percentage

Question

i have this code:

HTML

<div class="bar-value"></div>

CSS

.bar-value{
    width: 50%;
    height: 28px;
    background: #8BBDE8;
}

JQUERY

$(document).ready(function(){
    var percent = $('.bar-value').css('width');
});

the problem is that this returns the width of the div in pixels (in this case: 200px). I want that to return the value of the div in percentage (50%).

Thanks in advance!

blex · Answer 1 · 2014-05-04T23:18:30.180

2

To get a percentage, you need the width of it's parent. Try this :

$(document).ready(function(){
    var element = $('.bar-value');
    var percent = element.css('width')/element.parent().width()*100+'%';
});

edited May 04 '14 at 23:18

answered May 04 '14 at 23:13

blex

24,941
5
39
72

i tried that code with a variaton and worked fine, thanks! will be marked as accepted answer as soon as possible – mrpinkman May 04 '14 at 23:15
1

Sorry I forgot to multiply that by 100. Edited. – blex May 04 '14 at 23:19

score 1 · Answer 2 · edited May 23 '17 at 12:05

1

This question has already been answered here

You have to implement it yourself :

var width = $('.bar-value').css('width');
var parentWidth = $('.bar-value').offsetParent().css('width');
var percent = 100*width/parentWidth;

edited May 23 '17 at 12:05

Community

1
1

answered May 04 '14 at 23:15

Tofandel

3,006
1
29
48

get css width of an element and convert it to percentage

2 Answers2

Linked