jquery if (css_attribute = value)

css, javascript, jquery

Solution

The `css` JQuery method, when given only one parameter, will return the value for the given paramenter. You can try this:

var color = $('.box').css('background-color');
if (color == 'rgb(0, 0, 255)' || color == 'blue') // =='blue' <- IE hack
    alert("it's blue!\nColor detected: " + color);

The above sample will only work for the first element in the JQuery selector, therefore you should use the `.each` JQuery method to iterate through the whole selector if you have more than one element in it.

Please note that the `.css` JQuery method returns a RGB combination in most browsers (except IE), so testing it against a string such as `blue` will not suffice for non-IE browsers. You can test that in the JQuery API site and my fiddle.

And here's with the proper `.each` iteration:

$('.box').each(function(i){
    var color = $(this).css('background-color');
    if (color == 'rgb(0, 0, 255)' || color == 'blue') // =='blue' <- IE hack
        alert("div " + i + " is blue!\nColor detected: " + color);
});​

JSFiddle

Edit: over a year and half later, I feel like this answer deserves an update.

For most use cases, I'd recommend using a CSS class:

.blue {
    color: blue;
}

This allows the usage of the `addClass()`, `removeClass()`, `toggleClass()` methods for manipulation, as well as `hasClass()` for checking:

if ( $('#myElem').hasClass('blue') ) {
    //it has the .blue class!
}

This works seamlessly in all browsers without needing hacks, and as a plus you get better separation of concerns -- that is, if your styling ever changes, say `.blue { color: lightblue; }`, the JS will keep working without modifications.

Note: of course, this approach is not suitable for a couple rare use cases where the color value is dynamically generated (e.g. using `Math.random()` or picking a color value off a canvas pixel), in these rare use cases you can still use the first solution in this answer.

Problem

Original source