I want to get the width of an element in percentage. I am using the following function to get the style but it gives the value in pixels. Here the variable style can be any css property like width, height etc.
this.getStyle = function(style) {
var elementStyle = window.getComputedStyle(that.element);
var value = elementName.getPropertyValue(style);
return value;
}
Seems that you're looking for
that.element.style.width
that.element.style.height
etc
css is inline style like: <div style="width:60%">test</div>
I think you get always pixels, rather than % width. The reason is while object render it always set physical width based on% we given, this you can verify via dom. Javascript use DOM(Document Object Model), while jQuery you can use Dom as well as before load property via document.getready().
So as above you can get the property, but in pixels.
document.getElementById('yourdivname').element.style.width
or
div2 = document.getElementById('div2');
alert("Width of div2 with style = " + div2.style.width);
Getting the width of an html element in percent % with jQuery
This is interesting :
$(document).ready is a jQuery event to be triggered after the HTML document has been loaded vs onload is a built-in DOM event to be triggered after all content has been loaded. So the ready event would normally fire earlier than the onload event, allowing code execution as early as possible without having to wait for all assets to be fully loaded
For more details :- click this link.
Have you tried something like this:
var width = (100 * parseFloat($('.largeField').css('width')) / parseFloat($('.largeField').parent().css('width')) ) + '%';
