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...
}
Add a comment
|
5 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);
});
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.
3 Comments
Derek 朕會功夫
Or like this
$($('.box')[3]).css() to choose the fourth element that matches.
Fabrício Matté
Added RGB note,
.each iteration and example.
d-_-b
Thanks! Perfect answer, and you saved me trouble of messing around with HEX values instead of RGB too.
You should be able to do something like this:
if ($('.box').css('background-color') === 'blue')
{// do this...}
2 Comments
Jared Farrish
In this case
=== and == are essentially going to give the same result. It's a matter of preference, but both are correct.Fabrício Matté
strictly equal to string
blue? Testing the .css method in the API page seems to always return a RGB string.. edit: Except on IE.check for spaces in
if($(this).css('color') == 'rgb(251, 176, 64)')
"SPACE AFTER COMA"
1 Comment
Ben Racicot
This returns true for me even if the link is red. My :visited color is green.
boxes = $('.box');
for(var i = 0;i<boxes.length;i++) {
if(boxes[i].style.backgroundColor =="blue") {
//do stuff
}
}
1 Comment
Derek 朕會功夫
Note: The question is about
jQuery.None of the above seems to work here in 2015. Testing a link's color against the :visited color seems to be true in all cases in Chrome for me. Also if you are not 'sniffing' and genuinely want to know if a link has been clicked during their visit to YOUR website I've found that a simple:
$("a").addClass('visited');
and checking for the class works just fine.
if ( $("a").hasClass('visited'); ){ console.log('do something honorable'); }
