Getting style of an element from css file with javascript

Question

I wanna get a style of an element from css file with javascript. But, i just can getting only elements i enter style properties on javascript. I tried like this on Angular;

angular.element(document.getElementById("box")).css("width")

It's not worked. After, i tried like this;

document.getElementById("box").style

But it's not worked. How can i accomplish this?

It could be because you are searching for an element that is not loaded in the DOM yet. Try to add your code inside, angular.element(document).ready(function () { document.getElementById("box").style }); — Praveen Alluri
– Praveen Alluri, Commented Oct 30, 2017 at 21:02
document.getElementById("box").style.width is what you are loooking for — Sanchit Patiyal
– Sanchit Patiyal, Commented Oct 30, 2017 at 21:05
I can't use 'ready function', because i don't use jquery. @PraveenAlluri — Enes Giray
– Enes Giray, Commented Oct 30, 2017 at 21:10

Daniel Beck · Accepted Answer · 2017-10-30 21:08:24Z

3

This isn't an Angular issue, it's just how CSS and Javascript interact. You need to use getComputedStyle to read style properties that were defined in a CSS file.

// This will work (because it's an inline style)
console.log(document.getElementById('a').style.width)

// This won't work (because the style was defined in css):
console.log(document.getElementById('b').style.width)

// getComputedStyle will work regardless of the source:
console.log(window.getComputedStyle(document.getElementById('b')).width)

#b {width: 100px}

<div id="a" style="width: 100px">A</div>
<div id="b">B</div>

answered Oct 30, 2017 at 21:08

Daniel Beck

21.7k5 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bekim Bacaj · Accepted Answer · 2017-10-30 21:12:05Z

0

You cannot get css template rule values of elements calling style properties unless they were set *1. using inline style on html element level; or *2. the style property has been set using JavaScript

which does the same: writes to inline html style property of the target element.

the solution is to use the computed style instead:

as in : getComputedStyle(box,0).width

answered Oct 30, 2017 at 21:12

Bekim Bacaj

6,0152 gold badges27 silver badges26 bronze badges

Collectives™ on Stack Overflow

Getting style of an element from css file with javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related