Getting the width of an html element in percent % with jQuery

Question

If I alert the element which has a css selector set to width:100% I get it's with in px, is there some way to get it in % as set from css, I need it to fix some script with fluid layouts.

// css
.my-element {
    width:100%;
}

// javascript
alert('width: '+$('.my-element').css('width'));
// this alerts "width: 1116px" instead of "width: 100%"

Maybe something like this is always true?

alert($('.my-element').outerWidth() == $('.my-element').parent().outerWidth());

There is a plugin which I forgot it's name that read css properties from the `css` file... :( — gdoron, May 16 '12 at 18:23
interesting! I never thought to need the with in `%` I think this should a useful feature for fluid layouts. — vitto, May 16 '12 at 18:27

score 6 · Answer 1 · answered May 16 '12 at 18:41

6

function percentwidth(elem){
    var pa= elem.offsetParent || elem;
    return ((elem.offsetWidth/pa.offsetWidth)*100).toFixed(2)+'%';
}

answered May 16 '12 at 18:41

kennebec

102,654
32
106
127

Adil · Answer 2 · 2013-07-18T13:57:22.993

4

You can get the width in percentage by two methods.

Live Demo

With jQuery use jQuery 1.3.2 and you will get 100%.

alert($('.my-element').css('width'));

With javascript by setting width in style attribute of the tag like this

<div id="div2" style="width:100%"></div>

div2 = document.getElementById('div2');

alert("Width of div2 with style = " + div2.style.width);

edited Jul 18 '13 at 13:57

answered May 16 '12 at 18:57

Adil

146,340
25
209
204

This has changed prior to jQuery 1.6.4! The second alert works, though. – Yanick Rochon Feb 06 '14 at 04:02
Thanks @SakthiKarthik – Adil Jun 17 '15 at 07:13

score -1 · Answer 3 · edited May 23 '17 at 10:28

-1

This post

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?

edited May 23 '17 at 10:28

Community

1
1

answered May 16 '12 at 18:22

Mike Boutin

5,297
12
38
65

How does it answer the question? – gdoron May 16 '12 at 18:23
This only works if the element doesn't have a parent element with a width itself, wich is what the question is all about I think. – Leo May 16 '12 at 18:24
this is not always true, for example if I have `.my-element` wrapped inside another with a different width from the document. – vitto May 16 '12 at 18:25
if your parent div is 300px and your inner element is 100% both are 300px isn't it? – Mike Boutin May 16 '12 at 18:27

Getting the width of an html element in percent % with jQuery

3 Answers3

Linked