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

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

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

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

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

Ответ 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; }

Ответ 2

Пока это может работать, вы сохраняете информацию в виде цветов, а затем извлекаете и сравниваете эту информацию позже. Alconja предлагает подход, который будет работать, но в конечном итоге вам может быть лучше работать с классами, чьи имена могут быть определены вами, чтобы нести соответствующий смысл. Это намного дружелюбнее и менее хрупкое, чтобы иметь что-то вроде этого:

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

Ответ 3

если вы используете нативный JavaScript, вы можете попробовать

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

или же

Если вы используете jQuery, вы можете попробовать что-то вроде

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