How to get css property value in pure javascript

Question

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

Answer 1

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 :

1. 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?

2. http://www.lucemorker.com/blog/javascript-vs-jquery-quick-overview-and-comparison

$(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.

Answer 2

Seems that you're looking for

that.element.style.width
that.element.style.height
etc