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 create a border-bottom in CSS using a text character such as a dash, letter or number

    Css and jQuery: How do I trigger the repositioning of a CSS3-animated element back to where it was before the animation?

    How to center an img inside a div

    How to refer to a child class CSS

    How to precompile scss to a single css file in webpack?

    How to set both a background colour and a different text color on the same element

    How do I break the border around text in css?

    How to adjust the height of a Bootstrap accordion

    How do I spilt the footer into different widths?

    How do you select a radio button in css?

    CSS - How to make a div as wide as a containing child img

    Is there a limit to how deep an HTML document or CSS tree can be?

    Why are THs bolder than TDs and how to avoid it?

    how to center text and control user zoom in CSS

    How can .css('display') be block, [0].hidden be false, and .is(':hidden') be true?

    How to use a different stylesheet for iphone or android? I can modify only html later on

    CSS how to center ::after pseudo elem

    How to make Angular Forms ngModel classes inherit from Bootstrap Forms classes

    How to align this CSS menu to the right of its containing div?

    GWT- SingleSelectionModel celltable- how to change selected cell's CSS?

    How to contain text box in parent div

    How to create a progress dialog when switching the webpages?

    How to import Google Web Font in CSS file?

    How to highlight a row in a table on certain occasions

    What is the ::content pseudo-element and how does it work?

    How to pin sidebar to the top of page but within its parent element using HTML/CSS only

    JavaScript or CSS: How can I make a transition of one element to another?

    How to center the center circle?

    How to add a css style class atribute to links generated from wp_get_archives?

    How to make text “Passed” and progress bar appear in line in smaller views?