Why won't this work?
Browser = Safari
<p style="color:blue;">foo</p>
if ($("p").css(("color") === "blue")) {
alert(1);
}
Thank you
Add a comment
|
4 Answers
Initially, the bracket placement is wrong. You should be getting the value of the CSS property "color" with .css("color") and testing for equality with your value like so:
if ($('p').css('color') === 'blue') {
alert('color is blue');
}
However, some browsers will return the rgb value instead which will not match your "blue", for example Chrome and Firefox return rgb(0, 0, 255) for $('p').css('color'), so you might want to test against the rgb (or even hex - '#0000ff') value as well. All the values are logically but not textually the same.
var color = $('p').css('color')
if (color === 'blue' || color === 'rgb(0, 0, 255)' || color === '#0000ff') {
alert('color is blue');
}
Taking it even further, the if condition should probably take into account the case of the color. 'BLUE' or '#0000FF' are also valid.
Comments
i think it should be : if ($("p").css("color") === "blue"){ alert(1); }
Comments
At least in Firefox and Chrome
$("p").css("color")
returns rgb(0,0,255) so your condition will not be true anyway. So maybe such workaround:
if ($("p").attr("style").contains('color:blue;')) {
alert(1);
}
