Changing bg color of div vs. Text

Question

When I attempt to dynamically change the color of text via on click I seem to have no problem using style.color="___" however, this doesn't seem to want to work for the background color of divs. Is there a particular reason for this?

var text = document.getElementById("text");

var square = document.getElementById("square");

text.onclick = function() {
  if (this.style.color === "blue") {
    this.style.color = "black";
    console.log("it worked");
  } else {
    this.style.color = "blue";
  }
};

square.onclick = function() {
  if (this.style.backgroundColor === "#ccc") {
    this.style.backgroundColor = "#fff";
  } else {
    this.style.backgroundColor = "#ccc";
  }
};

#text {
  color: blue;
}
#square {
  height: 50px;
  width: 50px;
  background-color: #ccc;
  transition: all .5s ease;
}

<p id="text">Test</p>

<div id="square"></div>

Basic debugging: `console.log()` the backgroundColor before you test it with `===`. — Quentin, Sep 15 '16 at 15:02
`this.style.backgroundColor = x` should work, provided `this` is a valid element. — Chris, Sep 15 '16 at 15:02
`this.style.backgroundColor` is equal to `rgb(204, 204, 204)` (in Chrome) — J. Titus, Sep 15 '16 at 15:03
@Chris — There is code in the question. You can see that `this` is a valid element and (with a bit of debugging) that `this.style.backgroundColor = x` does work. — Quentin, Sep 15 '16 at 15:05
@Quentin, I didn't run the code when I made the comment because there wasn't a runnable code. You edited the OP and made it runnable just after. But yeah, I see that now. — Chris, Sep 15 '16 at 15:07
When I debugged the color it returned an empty " " which means no value yes? Also someone below noted that typing this.style.backgrouncColor looks for in line and then falls into the else condition, how do IO direct it to look at the css vs. the inl;ine? — Theodore Steiner, Sep 15 '16 at 15:09

skyline3000 · Accepted Answer · 2016-09-15T15:28:50.360

A few issues with your code:

When checking an element's style definition, you are looking for inline styles, not styles stored in CSS. That's why the link text doesn't change from blue to black on the first click, it's actually falling into the else condition first and then setting an inline style to blue. After the first click, an inline style has been set and the clicking works correctly.
You are checking for #ccc but the browser is converting this to an inline style of rgb(204, 204, 204) - so you are actually checking if #ccc is equal to rgb(204, 204, 204), which they are not, thus your color never changes.

To check an element's styles including styles defined in stylesheets, you can use getComputedStyle():

window.getComputedStyle(square,null).getPropertyValue("background-color");

You're probably better off using classes for the different colors rather than checking inline styles. You can create semantic names for your classes and switch to different colors as needed without needing to check specific CSS values in JavaScript.

var text = document.getElementById("text");
var square = document.getElementById("square");

text.onclick = function() {
  if (this.className === "text-blue") {
    this.className = 'text-black';
  } else {
    this.className = "text-blue";
  }
};

square.onclick = function() {
  if (this.className === "square-grey") {
    this.className = "square-white";
  } else {
    this.className = "square-grey";
  }
};

#text.text-blue {
  color: blue;
}

#text.text-black {
  color: black;
}

#square {
  height: 50px;
  width: 50px;
  transition: all .5s ease;
}

#square.square-grey {
  background-color: #ccc;
}

#square.square-white {
  background-color: #fff;
}

<p id="text" class="text-blue">Test</p>

<div id="square" class="square-grey"></div>

I didn't know that. Very interesting. So how do I direct it to look at the css styler rather than the inline style? Also when I debug via the console i simply get empty " " — Theodore Steiner, Sep 15 '16 at 15:07
I've edited my answer to include getting all CSS values. Downvoter care to comment? — skyline3000, Sep 15 '16 at 15:11
@TheodoreSteiner see my edits where the colors are kept defined in CSS as classes and in JavaScript you merely switch the class that is being used. — skyline3000, Sep 15 '16 at 15:29
Right but getting this computed style doesn't actually make the way I call the element any differently. If for example I'm looking for height and the style returns 100px, and I further go if(style.height == "100px") won't that still be initially looking at the inline? — Theodore Steiner, Sep 15 '16 at 15:45
@TheodoreSteiner Yes, that's right. When you use `element.style` you are always looking at the element's *inline styles*. So instead of that, you either need to store the styles in classes as shown in my above code snippet, or you would need to use `getComputedStyle()` like `if (window.getComputedStyle(square, null).getPropertyValue('height') == '100px')`. Or you would always need to make sure that you have inline styles on the tags in your HTML code. — skyline3000, Sep 15 '16 at 15:57

score 0 · Answer 2 · answered Sep 15 '16 at 15:06

0

style returns for your backgroundColor to rgb(204, 204, 204) and expects and rgb value

answered Sep 15 '16 at 15:06

Sebastian Tilch

69
1

Abhijeet · Answer 3 · 2016-09-15T15:15:03.323

Your java script returning colour in rgb format (backgroundColor : rgb(204, 204, 204) ).

Below code will work :

var text = document.getElementById("text");

var square = document.getElementById("square");
$(document).ready(function() {
text.onclick = function() {
  if (this.style.color === "blue") {
    this.style.color = "black";
    console.log("it worked");
  } else {
    this.style.color = "blue";
  }
};

square.onclick = function() {
  if (this.style.backgroundColor == "rgb(204, 204, 204)") {
    this.style.backgroundColor = "#fff";
     console.log("div worked");
  } else {
    this.style.backgroundColor = "#ccc";
  }
};
  });

#text {
  color: blue;
}
#square {
  height: 50px;
  width: 50px;
  background-color: #ccc;
  transition: all .5s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="text">Test</p>

<div id="square"></div>

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

The problem is JavaScript will set color as rgb() even if you give a hex value(in this case #ccc) to backgroundColor. There are two possible way to solve this

Check for rgb() instead of hex

var text = document.getElementById("text");

var square = document.getElementById("square");

text.onclick = function()
{
    if(this.style.color === "blue")
    {
        this.style.color = "black";
        console.log("it worked");
    } else
    {
        this.style.color = "blue";
    }
};

square.onclick = function()
{
    if(this.style.backgroundColor === "rgb(204, 204, 204)")
    {
        this.style.backgroundColor = "#fff";
    } else
    {
        this.style.backgroundColor = "#ccc";
    }
};

#text
{
    color: blue;
}

#square
{
    height: 50px;
    width: 50px;
    background-color: #ccc;
    transition: all .5s ease;
}

<p id="text">Test</p>

<div id="square"></div>

Convert the obtained rgb() color from this.style.backgroundColor to hex and check with if

Check here for that method RGB to Hex and Hex to RGB

Changing bg color of div vs. Text

4 Answers4