比较背景颜色的Jquery

时间:2012-07-18 18:30:05

标签: jquery

我正在使用:

var element = $(this).parents("tr:first");

if (element.css("background-color")=="black)")
    element.animate({ backgroundColor: "white" }, 1000);
else
    element.animate({ backgroundColor: "black" }, 1000);

要改变背景颜色,但比较似乎失败了,我也尝试过:

if (element.css("background-color")==rgb(0,0,0))

但if条件似乎每次都返回false?

2 个答案:

答案 0 :(得分:3)

这取决于您的浏览器及其支持的内容。

有些浏览器会返回rgb(0,0,0),但大多数较新的浏览器都支持rgba并返回rgba(0,0,0,0)。其他浏览器可能会返回完全不同的东西,谁知道什么?

试试这个Fiddle并查看它是否有效,它适用于最新的Chrome浏览器,但它可能无法在所有浏览器中使用。

var element = $(this).parents("tr:first");

if (element.css("background-color")==="rgba(0, 0, 0, 0)") {
    element.animate({ backgroundColor: "black" }, 1000);
}else{
    element.animate({ backgroundColor: "white" }, 1000);
}

另外,你的if / else语句有缺陷,缺少卷曲支架!

由于检查浏览器返回的颜色不太可靠,您应该考虑使用标志

var element = $(this).parents("tr:first");
var flag    = element.data("flag");

if ( flag ) {
    element.animate({ backgroundColor: "black" }, 1000);
}else {
    element.animate({ backgroundColor: "white" }, 1000);
}

element.data("flag", !flag);

最后,如果没有插件或jQuery UI,jQuery不支持动画颜色。

答案 1 :(得分:1)

返回的值是rgb格式,你应该使用字符串的引号:

if(element.css("background-color") == "rgb(0, 0, 0)")