854 votos

¿Cómo puedo eliminar un estilo añadido con la función .css()?

Voy a cambiar CSS con jQuery y deseo eliminar el estilo que estoy añadiendo basado en el valor de entrada:

if(color != '000000') $("body").css("background-color", color); else // remove style ?

¿Cómo puedo hacerlo?
Tenga en cuenta que la línea anterior se ejecuta siempre que se selecciona un color utilizando un selector de color (es decir, cuando el ratón se mueve sobre una rueda de color).

2ª nota: No puedo hacer esto con css("background-color", "none") porque eliminará el estilo por defecto del CSS archivos.
Sólo quiero eliminar el background-color estilo en línea añadido por jQuery .

1317voto

Pekka 웃 Puntos 249607

Cambiar la propiedad a una cadena vacía parece funcionar:

$.css("background-color", "");

535voto

ThinkingStiff Puntos 19251

La respuesta aceptada funciona pero deja un vacío style en el DOM en mis pruebas. No es gran cosa, pero esto lo elimina todo:

removeAttr( 'style' );

Esto supone que quiere eliminar todo el estilo dinámico y volver al estilo de la hoja de estilos.

170voto

KrisWebDev Puntos 1788

Hay varias maneras de eliminar una propiedad CSS usando jQuery:

1. Establecer la propiedad CSS a su valor por defecto (inicial)

.css("background-color", "transparent")

Ver el valor inicial de la propiedad CSS en MDN . Aquí el valor por defecto es transparent . También puede utilizar inherit para que varias propiedades CSS hereden el atributo de su padre. En CSS3/CSS4, también se puede utilizar initial , revert o unset pero estas palabras clave pueden tener una compatibilidad limitada con los navegadores.

2. Eliminación de la propiedad CSS

Una cadena vacía elimina la propiedad CSS, es decir

.css("background-color","")

Pero cuidado, como se especifica en Documentación de jQuery .css() Esto elimina la propiedad, pero tiene problemas de compatibilidad con IE8 para ciertas propiedades CSS abreviadas, incluyendo fondo .

Establecer el valor de una propiedad de estilo a una cadena vacía - por ejemplo $('#mydiv').css('color', '') - elimina esa propiedad de un elemento si ya ha sido aplicada directamente, ya sea en el atributo HTML style HTML, a través del método .css() de jQuery, o a través de la manipulación directa de la propiedad de estilo. Sin embargo, no elimina un estilo estilo que ha sido aplicado con una regla CSS en una hoja de estilos o elemento. Advertencia: una notable excepción es que, para IE 8 y posteriores, la eliminación de una propiedad abreviada como el borde o el fondo eliminará ese estilo por completo del elemento, independientemente de lo que se establezca en una hoja de estilos o en un elemento .

3. Eliminar todo el estilo del elemento

.removeAttr("style")

48voto

Marwan Puntos 1284

Tengo la forma de eliminar un atributo de estilo con JavaScript puro sólo para que conozcas el camino de JavaScript puro

var bodyStyle = document.body.style;
if (bodyStyle.removeAttribute)
    bodyStyle.removeAttribute('background-color');
else        
    bodyStyle.removeProperty('background-color');

18voto

Mahesh Gaikwad Puntos 141

Cualquiera de estas funciones de jQuery debería funcionar:

$("#element").removeAttr("style");
$("#element").removeAttr("background-color")

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X