如何使用jQuery检查css值？

Question

用户点击表格行后，我希望它检查表格行的背景颜色是否为白色，如果是，则将颜色更改为浅蓝色。

我使用的代码不起作用。 这里是：

$("#tracker_table tr#master").click(function(){
  if($(this).css("background-color") == "#FFFFFF") { 
    $(this).css("background-color", "#C2DAEF");
  }
});

我认为我的if语句有问题。 如何使用jQuery检查css值？

Answer 1

看起来它以rgb(x, y, z)的形式返回，所以你的代码应该是：

$("#tracker_table tr#master").click(function(){
  if($(this).css("background-color") == "rgb(255, 255, 255)") { 
    $(this).css("background-color", "#C2DAEF");
  }
});

编辑 ：话虽如此，我建议你使用类而不是直接检查/设置css属性。 像这样的东西：

$("#tracker_table tr#master").click(function(){
  if(!$(this).hasClass("selected")) { 
    $(this).addClass("selected");
  }
});

CSS：

tr { background-color: #FFFFFF; }
tr.selected { background-color: #C2DAEF; }

Answer 2

虽然这可能有效，但实际上您是以颜色的形式存储信息，然后在以后检索和比较这些信息。 Alconja提出了一种可行的方法，但最终你可能会更好地使用类，其名称可以由您定义以具有适当的含义。 有这样的东西更友好，更脆弱：

$('#tracker_table tr#master').click( function(){
    if ( $(this).hasClass('something') ) {
        $(this).removeClass('something').addClass('something_else');
    }
})

Answer 3

如果您使用的是原生javascript，可以试试

document.getElementById("#SELECTOR").style.("STYLE_PROPERTY") == VALUE;

要么

如果你正在使用jQuery，你可以尝试类似的东西

$("#SELECTOR").css("STYLE_PROPERTY") == VALUE_TO_MATCH