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

What about doing a manual calculation of the % using the pixel width value of the parent element? — Mr_Pouet, Dec 20 '15 at 06:33
Possible duplicate: http://stackoverflow.com/questions/9730612/get-element-css-property-width-height-value-as-it-was-set-in-percent-em-px-et — Mr_Pouet, Dec 20 '15 at 06:34

score 13 · Accepted Answer · answered Dec 20 '15 at 06:35

13

Seems that you're looking for

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

answered Dec 20 '15 at 06:35

Kiril

2,935
1
33
41

2

It's working only if the `css` is inline style like: `
test
` – Mosh Feu Dec 20 '15 at 07:40
@MoshFeu it works even if CSS is not defined inline with latest Firefox and Chromium (tested with Firefox 56 and Chromium 62). But I think it depends of the CSS property, for example when using a CSS stylesheet, I can access width and height via element.style but not for the border property: https://stackoverflow.com/questions/10675885/get-set-css-property-values-via-javascript-questions – baptx Nov 19 '17 at 21:52

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

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.

score -1 · Answer 3 · edited Dec 20 '15 at 07:44

-1

Have you tried something like this:

var width = (100 * parseFloat($('.largeField').css('width')) / parseFloat($('.largeField').parent().css('width')) ) + '%';

edited Dec 20 '15 at 07:44

Mosh Feu

28,354
16
88
135

answered Dec 20 '15 at 06:36

Brian Hankins

35
6

1

how do you write this in pure javascript? – Romit Amgai Dec 20 '15 at 08:25
The Original Poster asked for pure JavaScript, but this is jQuery Code without explanation. – Marvin Dec 03 '18 at 02:49

How to get css property value in pure javascript

3 Answers3

Linked