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

93

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

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

Quiero poder desarmar ese valor específico del elemento y usar el valor en cascada, a lo largo de las líneas de:

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

Pero esa sintaxis no parece funcionar, ¿es esto posible usando otra sintaxis?

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!

jquery css

— cdleary
fuente

141

De los documentos de jQuery :

Establecer el valor de una propiedad de estilo en 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, mediante el .css()método de jQuery o mediante la manipulación DOM directa de la stylepropiedad. Sin embargo, no elimina un estilo que se haya aplicado con una regla CSS en una hoja de estilo o <style>elemento.

— Glenn Moss
fuente

Me encontré con esta pregunta cuando tuve este problema. En mi caso, estaba configurando el atributo css en un styleatributo en la etiqueta, por lo que este método no funcionó. Aplicar el estilo con el .css()método en lugar de en la etiqueta me permitió eliminarlo más tarde.

— Glenn Moss

14

Creo que también puedes hacer:

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

Eso es lo que solía hacer hace mucho tiempo para la displaypropiedad en simple-antiguo-javascript para mostrar / ocultar un campo.

— FryGuy
fuente

4

En realidad, la sintaxis que pensé era incorrecta (con null ) parece estar funcionando: mi selector se formó incorrectamente y, por lo tanto, no produjo elementos. ¡Oh!

— cdleary
fuente

21

A partir de jquery 1.4.3 css(..., null)no funciona y css(..., '')debería usarse en su lugar - bugs.jquery.com/ticket/7233

— Tim Sylvester

3

Prueba esto:

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

— HéctorMac
fuente

1

Lamentablemente, heredar no es el comportamiento que estoy buscando: "la propiedad toma el mismo valor calculado que la propiedad del elemento principal" de w3.org/TR/CSS2/cascade.html

— cdleary

Es más probable 'inicial' que 'heredado'. 'Heredar' se adapta del padre, 'Inicial' hace lo que dice la palabra.

— Chris S.

0

Por lo que vale, esto parece no funcionar en IE 8 para 'filtro', tuve que usar esto (en fadeIn callback):

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

Obviamente, tuve que eliminar una declaración de filtro en línea vacía para que el CSS pudiera tener efecto; había otras reglas en línea, por lo que no podía eliminar el atributo de estilo.

— Brandon Hill
fuente

-2

Si puede ayudar, agrego un problema con comillas dobles:

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

no funciona mientras

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

trabajos

— merlintintin
fuente