How do I check for a css value using jQuery?

Question

After the user clicks on a table row, I want it to check if the table row's background-color is white, and if so, it will change the color to light blue.

The code I am using is not working. Here it is:

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

I think there is something wrong with my if statement. How do I check for a css value using jQuery?

Answer 1

Looks like it gets returned in the form rgb(x, y, z), so your code should be:

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

Edit: That being said, I'd suggest you use classes instead of inspecting/setting css properties directly. Something like this:

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

Css:

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