Why do I need to check for style.element = '' first when manipulating CSS in DOM

Question

Whenever I try to manipulate CSS in DOM and check if a CSS node has a certain value, It won't work if I actually check it against its value as assigned in my CSS file. Instead I need to first check it against a null value. The code below is an example.

var nav = document.getElementById('nav');

 if(nav.style.backgroundColor == ''){
  nav.style.backgroundColor = 'green';
  nav.firstChild.nextSibling.style.borderBottom = '2px solid yellow';
 }

The code above will execute when

 nav.style.backgroundColor == '';

and not when I check it against its actual color assigned in my css file.

  nav.style.backgroundColor == 'blue';

Why is that? I know that the browser will turn the HTML file into a DOM, but does it not check against css styling?

JSFiddle : http://jsfiddle.net/7AX3m/1/

Edit Found another link on SO that uses getComputedStyle()

Link: getComputedStyle in pure Javascript?

King King · Accepted Answer · 2014-06-28T15:43:02.153

2

The style property returns the inline style of the element, you can modify the style via it but it can just help you get inline style. To get the style in CSS (as well as all the computed style), you have to use getComputedStyle method, however this returns just the readonly style:

var style = getComputedStyle(nav);
//then style.backgroundColor would return rgb(0,0,255) which equals to blue

edited Jun 28 '14 at 15:43

answered Jun 28 '14 at 15:31

King King

61,710
16
105
130

Problem is that `style.backgroundColor == ''` doesn't seem to happen when `style` is computed. I assume it always has some default background color. – Rudy Velthuis Jun 28 '14 at 15:36
@RudyVelthuis as I said `style` can just return inline style, so if you don't explicitly set `background-color` as inline style (or directly via `style`), you won't never get another value than an empty string. – King King Jun 28 '14 at 15:41
@KingKing: What I meant is: if you use the computed style, the background color never seems to be empty, even if the background color is not explicitly set in the CSS, so testing for the empty string seems to be useless. So as you posted it, it is not really a viable solution to the problem, IMO. In other words: the OP only wants to change the background to green if no style was applied at all. But even if no style was actively applied, the check for the empty string will still be false. – Rudy Velthuis Jun 28 '14 at 22:48
To clarify: ISTM the OP only wants to change the background if it is not any actively set color. So testing for blue is not good enough, he also doesn't want to change it if it is yellow, or red, or any other actively set color. But I see no way to distinguish between an actively set color (in CSS or inline or however) and the default color. When using the computed style, the string never seems to be empty, so testing for that is useless. – Rudy Velthuis Jun 28 '14 at 23:00
@RudyVelthuis the OP's code about `style.backgroundColor == ''` is just to show that it returns empty string. It's not what he wants to check. The 2 values he wants to check here is ***blue*** and ***green***. So what's wrong? Firstly check if it's `blue`, toggle to `green`and then may check if it's `green` -> toggle to back to `blue`. (the value is known via `rgb` expression, not the color name directly). There is no empty value involved here. However I would use a class for active state here. – King King Jun 29 '14 at 00:09
It is not what he wants to check? I am not so sure about that. – Rudy Velthuis Jun 29 '14 at 00:20
@RudyVelthuis yes I think so, he supposed it should have returned "blue" (as set in his CSS code), but it returns an empty string, that code is just to show that (in a visual way), and he did not understand why it was so. – King King Jun 29 '14 at 00:41

score 1 · Answer 2 · answered Jun 28 '14 at 15:37

You will have to use the following code

if(window.getComputedStyle(nav).backgroundColor == 'rgb(0, 0, 255)') 
.....

window.getComutedStyle documentation for more information

You use getComputedStyle to access the active stylesheet modifications, whereas nav.style..... accesses the property set during intial run of DOM rendering.

Why do I need to check for style.element = '' first when manipulating CSS in DOM

2 Answers2