How can I compare two color values in jQuery/JavaScript?

Question

I get color value with jQuery with .css('color'), and then I know color that it should be.

How can I compare color value that I get from jQuery with for example black color value?

Answer 1

Here is an approach that should work on all browsers using JQuery:

1. Create a hidden div <div id="dummy" style="display:none;"></div> on your HTML page. (Creating the dummy element dynamically with JQuery does not work for named colors)
2. Set the color of the dummy element to the expected color, i.e. $('#dummy').css('color','black');
3. Compare the color of the dummy element with the element you want to check

i.e.

if($('#element').css('color') === $('#dummy').css('color')) {
  //do something
}