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

Question

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!

Answer 1

From the jQuery docs:

Setting the value of a style property to an empty string — e.g. $('#mydiv').css('color', '') — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or <style> element.

Answer 2

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.