¿Cómo desactivo el atributo CSS de un elemento usando jQuery?

Question

Si fijo un valor CSS en un elemento específico usando:

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

Quiero ser posible remover ese valor específico del elemento y utilizar el valor en cascada, a lo largo de las líneas de:

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

Pero esa sintaxis no parece funcionar: ¿es posible usar otra sintaxis?

¡Gracias de antemano!

Editar: El valor no se hereda del elemento principal: los valores originales provienen de un selector de nivel de elemento. Perdón por cualquier confusión!

Answer 1

Desde el jQuery docs:

Ajuste del valor de una propiedad de estilo a una cadena vacía - por ejemplo, $('#mydiv').css('color', '') - elimina esa propiedad de un elemento si ya se ha aplicado directamente, ya sea en el atributo de estilo HTML, a través del método .css() de jQuery o mediante la manipulación DOM directa de la propiedad style. Sin embargo, no elimina un estilo que se haya aplicado con una regla CSS en una hoja de estilo o elemento <style>.

Answer 2

Prueba esto:

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

Answer 3

En realidad, la sintaxis que creía que era incorrecto (con null) parece estar funcionando - mi selector se formó solo de forma inadecuada, y lo que se obtiene ningún elemento. D'oh!

Answer 4

Creo que también se puede hacer:

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

Eso es lo que solía hacer hace mucho tiempo para la propiedad display en la llanura de edad-javascript para mostrar/ocultar un campo.

Answer 5

Por lo que vale la pena esto parece no trabajar en IE 8 para 'filtro', tuve que usar esto (en fadeIn devolución de llamada):

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

Obviamente, no tenía necesidad de eliminar una declaración de filtro en línea vacía para que el CSS pueda entrar en vigencia; había otras reglas en línea, así que no podía simplemente eliminar el atributo de estilo.