Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery if (css_attribute = value)

Is it possible to do an if statement in javascript/jquery to determine:

If the value of a certain element's css attribute is equal to a given value?

such as:

if( $('.box').css(background-color = blue) ){
    // do this...
}
like image 551
d-_-b Avatar asked May 27 '12 00:05

d-_-b


People also ask

Can we change CSS properties values using JavaScript or jQuery?

It is possible to change the CSS property of an element by using a simple JavaScript API, but we try to complete this challenge using jQuery css() method. Syntax: $(). css(propertyname, value); $().

How can check CSS property value in jQuery?

You can get the computed value of an element's CSS property by simply passing the property name as a parameter to the css() method. Here's the basic syntax: $(selector). css("propertyName");

How do you check if an element has a CSS?

To check if an element's style contains a specific CSS property, use the style object on the element to access the property and check if it's value is set, e.g. if (element. style. backgroundColor) {} . If the element's style does not contain the property, an empty string is returned.

Which jQuery method is used to get or set a CSS property value?

jQuery - css() Method The css() method sets or returns one or more style properties for the selected elements.


2 Answers

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.

like image 68
Fabrício Matté Avatar answered Sep 20 '22 01:09

Fabrício Matté


You should be able to do something like this:

if ($('.box').css('background-color') === 'blue') 
{// do this...}
like image 34
Farhan Ahmad Avatar answered Sep 18 '22 01:09

Farhan Ahmad