How do I check for a css value using jQuery?


Tags: jquery,css

Problem :

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?



Solution :

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; }

    CSS Howto..

    How to vertically align div text?

    Z-index problem with ie7 … working in firefox. Images showing behind other img's

    How to chain multiple -webkit-transition animations in my css without keyframes

    How to reduce space between unordered list and its previous element(center)?

    Hiding and showing elements with their respective styles in Javascript

    how to make nav auto adjsust its menu items using css?

    How can these images to fit on the screen?

    how to achieve facebook mobile site buttons menu scroll effect?

    How can I change Javascript Value into percentage instead of pixels

    How do you solve this problem regarding aligning divs next to each other? [duplicate]

    how are large quantities of css templates produced?

    How to correctly use tableless layout with borders using CSS?

    Show an image from b&w to color as if it were loading (left to right)

    css how to set the tr that has a speicifc id

    In CSS, how can I give two styles to same div according to its level on a
      list?

    How to write syntax in internal css to external css?

    How to add a space between paragraphs when using css reset? [closed]

    How to display the :after content outside element

    how to not inherit? or how to reset inherited width to the value before? (css)

    HTML CSS - How to render SQL nicely [closed]

    How do I get these hover effects but with diamonds instead of circles

    how to hide submenus in jquery menu

    How to get asterisk in placeholder with css

    How do I style the asp.net membership control with css?

    HTML/CSS Making a textbox with text that is grayed out, and disappears when I click to enter info, how?

    How to make text stay in place regardless of the monitor size?

    How to place scroll bar on side of table?

    CSS selectors: how to make element hovering change wrapper's style

    How do I float a div to the right of a title div without affecting the content of the title?

    How to hide a column in a DataGrid?