How to check the background-color of an element using jquery

Question

if($(this).css("background-color")==Crimson) 

is this correct ? .css("background-color","white") will change the color, but I don't want to change, I wanna know which color it is.

Mena

The major browsers will always return the background color in rgb or rgba format older browsers will return the value which was set. – Petulia

Answer 1

it works like this

if ($("#notify-9").css('background-color')=="rgb(220, 20, 60)") alert("matched");

you need to convert name to red, green, blue components, you might use this tool

http://www.yellowpipe.com/yis/tools/hex-to-rgb/color-converter.php

Mythify

Subtle detail... when writing rgb() take note of the leading spaces before the second and third value. – Freightage

Answer 2

Use quotes "" or '':

if($(this).css("background-color")=="Crimson") 

Sladen

Note that this will only work in older browser version. New Browsers will return "rgb(220, 20, 60)" if "Crimson" was set. Try it out: $("<div>").css("background-color","Crimson").appendTo("body").css("background-color") – Petulia

@micha: Yeah if not set otherwise but background name shows op has set it. – Sladen

Answer 3

Use quotes around the color name as:

if( $(this).css("background-color") == "Crimson" ) 

otherwise it is right.

Pontiac

Answer 4

just use below line

if($(this).css("background-color")=="crimson") 

as css("background-color") attribute result will be in small letters . so if you will compare with capital obviously it will return false. :) Small trick hope that work

Herschel

Answer 5

Possible answers in JavaScript is like this:

if(window.getComputedStyle(document.getElementById("notify-9"),null).getPropertyValue("background-color") == "rgb(220, 20, 60)"){
   alert("matched!");
}

// rgb(220, 20, 60) is equal to Crimson

Bloomfield