Get an element's style with JavaScript

Question

I'm working on something where I would need to return an element's style and print it in the HTML page itself. Okay I know how to print it but the problem is how do I get the element. To test if it would print the style I tried

console.log(document.getElementById('something').style.fontSize);

but it returns undefined, even though 'something' does have a set font size.

Why do you want to do this? Needing/wanting to "read" the style from an element is often a sign of somehow trying to maintain application state in the style information, and there are usually better ways to approach things. — , Dec 06 '15 at 16:33

score 7 · Answer 1 · edited Dec 06 '15 at 15:30

7

You need to get the computed style.

getComputedStyle(document.getElementById('something'), null);

So replace your code with:

console.log(getComputedStyle(document.getElementById('something'), null)
  .getPropertyValue("fontSize"));

_{See Window.getComputedStyle()}

edited Dec 06 '15 at 15:30

canon

40,609
10
73
97

answered Dec 06 '15 at 15:28

Praveen Kumar Purushothaman

164,888
24
203
252

It says `Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.` – SirMaxime Dec 07 '15 at 12:20
@SirMaxime You are giving a wrong ID there then... – Praveen Kumar Purushothaman Dec 07 '15 at 12:27
@SirMaxime Do not unaccept answers like this after you accept. But please let us knwo what's the problem. This is not ethical. – Praveen Kumar Purushothaman Dec 07 '15 at 12:31
No, I verified multiple times it is the correct ID. – SirMaxime Dec 07 '15 at 17:03
Show your full code in fiddle... – Praveen Kumar Purushothaman Dec 07 '15 at 17:26

Get an element's style with JavaScript

1 Answers1