Compare DOM backgroundcolor

Question

I am trying to compare background color of a td in JavaScript, and puzzled how exactly to call the color for comparison. The color is assigned in CSS (though it can be changed to be assigned in php, if that changes anything) and the td is assigned an onclick=clickedOn(this) that calls the following function:

function clickedOn(elem)
{
    if(elem.style.backgroundColor=='#F0F0F5')
        elem.style.backgroundColor="blue";
    else
        alert("no");
}

How do I compare the existing background color of the td in that if?

Possible duplicate of http://stackoverflow.com/questions/9421208/how-to-compare-a-backgroundcolor-in-javascript — The Alpha, Sep 13 '13 at 00:19

Yuriy Galanter · Answer 1 · 2013-09-13T02:46:23.953

1

If color is assigned via CSS, style attribute will not show it directly, you need to get computed style. For example using this cross-browser function:

function getStyle(el, styleProp) {
   if (el.currentStyle)
      var y = el.currentStyle[styleProp];
   else if (window.getComputedStyle)
      var y = document.defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
   return y;
}

You can run comparasing like

 if(getStyle(elem, 'background-color') =='#F0F0F5')

UPDATE Here's complete code to test the function. I had to add one more function to convert RGB color to Hex (since non-IE browsers return color in RGB):

<style>
  .cell1{
      background-color: #E0E0E5
  }

  .cell2{
      background-color: #F0F0F5
  }
</style>

<table style="width:200px; height:200px;border: solid 1px black">
    <tr>
        <td class="cell1" onclick="clickedOn(this)"></td>
        <td class="cell2" onclick="clickedOn(this)"></td>
    </tr>
</table>

<script>
function clickedOn(elem)
{
    var bColor = getStyle(elem,'background-color');

    if( bColor.toUpperCase() =='#F0F0F5' || colorToHex(bColor).toUpperCase() =='#F0F0F5')
        elem.style.backgroundColor="blue";
    else
        alert("no");
}

function getStyle(el, styleProp) {
   if (el.currentStyle)
      var y = el.currentStyle[styleProp];
   else if (window.getComputedStyle)
      var y = document.defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
   return y;
}    

function colorToHex(color) {
    if (color.substr(0, 1) === '#') {
        return color;
    }
    var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);

    var red = parseInt(digits[2]);
    var green = parseInt(digits[3]);
    var blue = parseInt(digits[4]);

    var rgb = blue | (green << 8) | (red << 16);
    return digits[1] + '#' + rgb.toString(16);
};    

</script>

Here is the demo: http://jsfiddle.net/UNE7S/

edited Sep 13 '13 at 02:46

answered Sep 13 '13 at 00:25

Yuriy Galanter

38,833
15
69
136

I use both JS and CSS to alter the td background, is there any alternative to the above function, if I were to skip CSS completely? – Nimbrod Sep 13 '13 at 00:43
@Cronnix the function is universal and will get the style no matter how you set it. – Yuriy Galanter Sep 13 '13 at 00:49
@YuriyGalanter Right, then the problem must be in how I send the `td` component to your function. Can I just use the `(this)` handle I got from my onclick, so I call your function `getStyle(this, backgroundColor)`? Or do I need to convert the `this` result before I use it in your function? Since I don't get your function to run, so I guess I must be sending wrong attributes. If that made sense.. – Nimbrod Sep 13 '13 at 01:12
Yes just do what you do now `onclick=clickedOn(this)` and inside of `function clickedOn(elem)` just send `elem` – Yuriy Galanter Sep 13 '13 at 01:28
@YuriyGalanter Sorry Yuriy, but I am rather new to this, trying to figure it out. The fucntion is returning null for some reason when I send `(elem, "backgroundColor")`. – Nimbrod Sep 13 '13 at 02:04
It had to be "background-color". And there were few other caveats, I've updated my code. Here you can see it live: http://jsfiddle.net/UNE7S/ – Yuriy Galanter Sep 13 '13 at 02:37
+1 for answering a JavaScript question with JavaScript and not a framework, I can't tell you how refreshing it is to see people actually authentically helping other people out. – John Sep 13 '13 at 03:52

Compare DOM backgroundcolor

1 Answers1