css( "background-color", "" ) not working

<table>
   <tr>
       <td class="temp" onclick="removeBGColor();">
             fdgdfgdfgdfgdf
       </td>
   </tr>
</table>

<st开发者_StackOverflowyle type="text/css">
.temp {
    background-color: red;  
} 
</style>
<script language="javascript">
function removeBGColor() {
    $(".temp").css("background-color", "" );
}
</script>

it will not remove the red color from the . what is the solution for this? Thank You

Just set it to transparent instead.

$(".temp").css("background-color", "transparent");

You can implement it however you would like. (However, I personally don't like any of my javascript jumbled with my html).

It is the easiest to jump to in the beginning but the hardest to maintain in the end.

Now, concerning your question, all of these people before me gave excellent suggestions of how to fix your issue because frankly, all of them work.

However, they didn't tell you why your code doesn't work.

The reason why you can't get the background to change from red is because you haven't told it what to change to.

An empty string is ignored by all browsers.

It's simple really, the browser looks at the value you gave it and it's "". It takes that, asks itself: Is that a hex value, rgb value or rgba value? And the answer is false. Since the browser only cares about hex, rgb, and rgba (and soon to come, HSL), it ignores everything else. So, your result is nothing.

So the real question is... What color do you want to change the background color to?

Do you want to change it to transparent so that the user can see the elements behind it or you don't know what color you want to change it to and you just want it back to how it was before you added your red background?

If that's the case, then carillonator's first comment will work perfect. "transparent" is the default value for all elements except the body (At least I believe so otherwise we'd all be seeing our desktops through our browsers every time we made a new tab).

And if you want the element to have the same background color as one of it's parent elements, then you would use Kyle Hotchkiss' answer.

The 'inherit' tells that element to look up the DOM Tree for any of its parents that have a value for the property you wish for. In this case, 'background-color', and it will use the value of this parent's background color as its own background color.

For example, if your table had a background color of black, and you set your ".temp" td background color to "inherit":

    <table>
        <tr>
        <td class="temp" onclick="removeBGColor();">
             fdgdfgdfgdfgdf
        </td>
   </tr>
</table>

<style type="text/css">
    table {
        background-color: black;
    }
    .temp {
        background-color: red;  
    } 
</style>
<script language="javascript">
function removeBGColor() {
    $(".temp").css("background-color", "inherit" );
}
</script>

Igoring the declared red background color previously assigned to it because of css specificity (a whole differnt topic... a great article here for more info), It would first look at the table row, which has no background-color property assigned to it, and then it would move up one more level, which brings it the 'table', which has a background color of black.

So, the td background becomes black as well.

In short, you don't have a problem with syntax or unexpected results.

These are results you will learn to expect (And may have already learned).

The browser can't change the background color to nothing, so it ignores it.

It has to have an rgb, rgba, or hex value, or a keyword such as ("red", "black", "white", "inherit", "transparent", etc...).

EDIT: my answer isn't always true; see Garrett's comment below.

you have to use camelCase CSS property names with jQuery for some reason:

$('.temp').css('backgroundColor','whatever');

here is some info.

Or you could even just set it to "inherit" so it gets it from the parent.

Calling javascript from your HTML code is not jQuery style. And you can use removeClass() to remove your css background color instead of directly changing your css.

Change your code to something like this

<style type="text/css">
.temp {
    background-color: red;  
} 
</style>

<script language="javascript">
$(function(){
    $("#tdTemp").click(function(){
        $(this).removeClass("temp");
    });
});
</script>

<table>
   <tr>
       <td id="tdTemp" class="temp">
             fdgdfgdfgdfgdf
       </td>
   </tr>
</table>

you should just use this:

$(".temp").css("background", "inherit"); 

instead of that:

$(".temp").css("background-color", "inherit");