IF DIV color is red?

Question

I have made a DIV that changes color, but I'm trying to find a way to know when it turns red. Here's what I need it to do:

if (DIV BACKGROUND COLOR RED) {
    alert("DIV IS RED");
}

How would I accomplish this?

You could use jquery: `$('mydiv').css('backgroundColor')`. I am on my phone and can't check the exact syntax — user3483203, Dec 11 '17 at 19:40
What is red to you? `#FF0000`? What about `#AA0000`? What about `#FFDDDD`? — h2ooooooo, Dec 11 '17 at 19:41

score 0 · Answer 1 · answered Dec 11 '17 at 19:54

You can access an element's background colour via window.getComputedStyle(element).backgroundColor.

This will be a string in either "rgb" or "rgba" representation, e.g.:

rgb(127, 127, 127)
rgba(127, 127, 127, 1)

An element is "red" if it's red component (the 1st number) is greater than the other colour components. Both rgb and rgba have 3 color components, and rgba has an extra "alpha" (transparency) component - which we can ignore, because it doesn't affect "redness".

We'll get the red green and blue components of the element's background color, and consider the element "red" if its red color component is greater than the green and blue components:

var isRed = function(element) {
  var bg = window.getComputedStyle(element).backgroundColor;
  if (!bg) return false; // Sometimes there is no background color, in which case the element isn't red

  // Otherwise, `bg` is a string:
  var rb = bg.indexOf('(');
  
  bg = bg.substr(rb + 1); // Trim off everything up until and including the "(" character
  bg = bg.split(','); // Split on the "," delimiter
    
  var r = parseInt(bg[0].trim());
  var g = parseInt(bg[1].trim());
  var b = parseInt(bg[2].trim());
  
  return r > g && r > b;
};

console.log('#red?', isRed(document.getElementById('red')));
console.log('#green?', isRed(document.getElementById('green')));
console.log('#blue?', isRed(document.getElementById('blue')));
console.log('#quiteRed?', isRed(document.getElementById('quiteRed')));
console.log('#notRed?', isRed(document.getElementById('notRed')));
console.log('#transparentRed?', isRed(document.getElementById('transparentRed')));

.col {
  width: 100%;
  height: 30px;
  color: #ffffff;
  line-height: 30px;
}
#red { background-color: #ff0000; }
#green { background-color: #00ff00; }
#blue { background-color: #0000ff; }
#quiteRed { background-color: rgb(220, 130, 120); }
#notRed { background-color: #80b0c0; }
#transparentRed { background-color: rgba(200, 50, 50, 0.4); }

<div class="col" id="red">red</div>
<div class="col" id="green">green</div>
<div class="col" id="blue">blue</div>
<div class="col" id="quiteRed">quiteRed</div>
<div class="col" id="notRed">notRed</div>
<div class="col" id="transparentRed">transparentRed</div>

Hit the "full page" button when running the example! – Gershom Maes Dec 11 '17 at 19:58 — Gershom Maes, Dec 11 '17 at 19:58

score 0 · Accepted Answer · answered Dec 11 '17 at 20:14

Yes can do this by using attribute change jquery plugin... As I can see you want an event to be triggered on color change automatically... So, your code will be something like this with its working example...

    $("#myDiv").attrchange({
        trackValues: true, 
        // set to true so that the event object is updated with old & new values
        callback: function(evnt) {
            if(evnt.newValue.indexOf('background: red') > -1) { 
            // which attribute you want to watch for changes
              alert("DIV IS RED");  
            }
        }
    });
    
    function change(x){
    document.getElementById("myDiv").style.background=x;
    }

#myDiv{
background:green;
}

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.rawgit.com/meetselva/attrchange/master/js/attrchange.js"></script>
<script src="https://cdn.rawgit.com/meetselva/attrchange/master/js/attrchange_ext.js"></script>
<div id="myDiv">This Div Changes colors</div>

<button onclick="change('red');">Change To Red</button>
<button onclick="change('blue');">Change To Blue</button>
<button onclick="change('green');">Change To Green</button>

The above code will prompt a message when the div turns red...

IF DIV color is red?

2 Answers2