¿Cómo puedo eliminar un estilo agregado con la función .css()?
Estoy cambiando CSS con jQuery y deseo eliminar el estilo que estoy agregando según el valor de entrada:
if(color != '000000') $("body").css("background-color", color); else // remove style ?
¿Cómo puedo hacer esto?
Tenga en cuenta que la línea de arriba se ejecuta cada vez que se selecciona un color usando un selector de color (es decir, cuando el mouse se mueve sobre una rueda de colores).
Segunda nota: no puedo hacer esto css("background-color", "none")porque eliminará el estilo predeterminado de los archivos CSS .
Solo quiero eliminar el background-colorestilo en línea agregado por jQuery .
Cambiar la propiedad a una cadena vacía parece funcionar:
$.css("background-color", "");
Oct 27 '2010 19:10
La respuesta aceptada funciona pero deja un styleatributo vacío en el DOM en mis pruebas. No es gran cosa, pero esto lo elimina todo:
removeAttr( 'style' );
Esto supone que desea eliminar todo el estilo dinámico y volver al estilo de la hoja de estilo.
Hay varias formas de eliminar una propiedad CSS usando jQuery:
1. Establecer la propiedad CSS en su valor predeterminado (inicial)
.css("background-color", "transparent")
Vea el valor inicial de la propiedad CSS en MDN . Aquí el valor predeterminado es transparent. También puede utilizar inheritvarias propiedades CSS para heredar el atributo de su padre. En CSS3/CSS4, también puede utilizar initial, reverto unsetpero estas palabras clave pueden tener una compatibilidad limitada con el navegador.
2. Eliminar la propiedad CSS
Una cadena vacía elimina la propiedad CSS, es decir
.css("background-color","")
Pero tenga cuidado, como se especifica en la documentación de jQuery .css() , esto elimina la propiedad pero tiene problemas de compatibilidad con IE8 para ciertas propiedades abreviadas de CSS, incluido el fondo .
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 estilo HTML. atributo, a través del método .css() de jQuery, o mediante la manipulación DOM directa de la propiedad de estilo. Sin embargo, no elimina un estilo que se haya aplicado con una regla CSS en una hoja de estilo o elemento. Advertencia: una excepción notable es que, para IE 8 y versiones anteriores, eliminar una propiedad abreviada como borde o fondo eliminará ese estilo por completo del elemento, independientemente de lo que esté configurado en una hoja de estilo o elemento .
3. Eliminar todo el estilo del elemento.
.removeAttr("style")
Encontré la forma de eliminar un atributo de estilo con JavaScript puro solo para que conozcas la forma de utilizar JavaScript puro.
var bodyStyle = document.body.style;
if (bodyStyle.removeAttribute)
bodyStyle.removeAttribute('background-color');
else
bodyStyle.removeProperty('background-color');
Esto eliminará la etiqueta completa:
$("body").removeAttr("style");
