Overriding CSS property using jQuery

Question

Suppose I have the following CSS in a linked style sheet:

td {background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);}

This makes all my table columns green.

Suppose I have the following table row:

<tr id="myRow"><td>stuff</td><td>more stuff</td></tr>

The whole row is green but following user input I want to do the following:

$("#myRow").children('td').css('backgroundColor', 'red');

Why won't this turn my row from green to red and how can I make that work without adding !important to my style sheets?

@Charlie Looks like I grabbed the wrong td style in my sheet when I made this post. I've edited it here. — eComEvo
– eComEvo, Commented Apr 20, 2013 at 2:03

Lemur · Accepted Answer · 2013-04-20 01:55:10Z

5

You can try:

$("#myRow").children('td').css('background-color', 'red');

or

$("#myRow").children('td').css('background', 'red');

Also some bizzare things to check if the above won't work:

Where do you call your jQuery code? (Is it in some function, $(document).ready()..?)
Do you have inline style attribute there?
Do you have any errors caused by previous code? (see debugger - built-in Chrome Dev Tools of FireBug)

answered Apr 20, 2013 at 1:28

Lemur

2,6654 gold badges29 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

jQuery's CSS method accepts camel-case properties like "backgroundColor" as well as dashed properties like "background-color"

agree with @jqueryrocks look: api.jquery.com/css said 'Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties.'

Hmm... I always treated them as typos, as I had some problems with these - sometimes it just didn't work.

Changing my code to simply 'background' did the trick. Apparently it couldn't override just the color on a custom gradient. Thanks!

@jqueryrocks I have also noticed what Pablo Lemurr noticed...some times the camel case just doesn't work as expected. Why, I don't know.