How do I unset an element's CSS attribute using jQuery?

cdleary_3594 0
Viewed 54253

If I set a CSS value on a specific element using:

$('#element').css('background-color', '#ccc');

I want to be able to unset that element-specific value and use the cascaded value, along the lines of:

$('#element').css('background-color', null);

But that syntax doesn't seem to work – is this possible using another syntax?

Edit: The value isn't inherited from the parent element – the original values comes from an element-level selector. Sorry for any confusion!

css jquery
6 Answers

I think you can also do:

$('#element').css('background-color', '');

That's what I used to do a long time ago for the display property in plain-old-javascript to show/hide a field.

FryGuy_287760

Actually, the syntax I thought was incorrect (with null) seems to be working -- my selector was just improperly formed, and thus yielding no elements. D'oh!

cdleary_35940

Try this:

$('#element').css('background-color', 'inherit');
HectorMac_14000

For what it's worth this appears not to work in IE 8 for 'filter,' I had to use this (in fadeIn callback):

$(this).attr('style', $(this).attr('style').replace(/\bfilter:\s*;*/, ''));

Obviously, I had need to remove an empty inline filter declaration so the CSS could take effect; there were other inline rules so I couldn't just remove the style attribute.

user_8154110

If it can help, I add a problem with double quote :

$('#element').css("border-color", "");

does not work while

$('#element').css('border-color', '');

works

user_32025710
Related