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 elem

Answer 1

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.

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.

Answer 3

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!

Answer 4

Try this:

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

Answer 5

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

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

does not work while

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

works

Answer 6

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.