Как проверить значение css с помощью jQuery?

Question

После того, как пользователь щелкнет строку таблицы, я хочу, чтобы она проверила, является ли цвет фона строки таблицы белым, и если это так, он изменит цвет на голубой.

Код, который я использую, не работает. Вот оно:

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

Я думаю, что-то не так с моим утверждением if. Как проверить значение css с помощью jQuery?

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