object.style.x doesn't return anything

Question

In JavaScript on my website I have something like this:

console.log(document.getElementById("side_news").style.display);

and I have tried this with a lot of styles and it doesn't return anything, just blank. What am I doing wrong?

Do `console.log(document.getElementById("side_news"))` and see if you get anything other than `null` — adeneo, Apr 19 '14 at 20:45
If it were null he'd get an error about not able to access the style property of null. — Barmar, Apr 19 '14 at 20:45
`.style` only accesses inline styles, not styles set from CSS files. — Barmar, Apr 19 '14 at 20:46
getComputedStyle -> https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle — adeneo, Apr 19 '14 at 20:49

score 0 · Answer 1 · answered Apr 19 '14 at 20:49

0

Try using getComputedStyle():

var sideNewsDiv = document.getElementById('side_news');
getComputedStyle(sideNewsDiv).getPropertyValue("display");

MDN documentation: Window.getComputedStyle().

answered Apr 19 '14 at 20:49

Sumner Evans

8,951
5
30
47

score 0 · Answer 2 · answered Apr 19 '14 at 20:59

Most elements don't show all of their attributes when accessing through object.style. A div element has a default display style of block but accessing it through style will result an empty value.

A solution is to use getComputedStyle - or, if not supported by the browser, currentStyle.

if (window.getComputedStyle)
    status = window.getComputedStyle(targetElement, null);
else
    status = targetElement.currentStyle;

This will show the element's style with all the css changes.

object.style.x doesn't return anything

2 Answers2

Linked