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());

Answer 1

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

Answer 2

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);

Answer 3

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?