¿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 basado en 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 anterior se ejecuta cada vez que se selecciona un color con un selector de color (es decir, cuando el mouse se mueve sobre una rueda de color).

2.a nota: No puedo hacer esto con css("background-color", "none") porque eliminará el estilo predeterminado de los archivos css. Solo quiero eliminar el estilo en línea de background-color agregado por jQuery.

Cambiar la propiedad a una cadena vacía parece hacer el trabajo.

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

La respuesta aceptada funciona pero deja un atributo de style 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 dynamic y volver al estilo de la hoja de estilo.

Hay varias maneras de eliminar una propiedad de CSS usando jQuery:

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

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

Vea el valor inicial para la propiedad CSS en MDN . Aquí el valor predeterminado es transparent . También puede usar inherit para varias propiedades CSS para heredar el atributo de su padre. En CSS3 / CSS4, también puede utilizar initial , revert o unset pero estas palabras clave pueden tener 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 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 ha aplicado con una regla CSS en una hoja de estilo o elemento. Advertencia: una excepción notable es que, para IE 8 y versiones posteriores, la eliminación de una propiedad taquigráfica como borde o fondo eliminará ese estilo por completo del elemento, independientemente de lo que esté establecido en una hoja de estilo o elemento .

3. Eliminar todo el estilo del elemento

 .removeAttr("style") 

Conseguí eliminar un atributo de estilo con JavaScript puro solo para que conozcas el camino del JavaScript puro

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

cualquiera de estas funciones jQuery debería funcionar:

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

Esto eliminará la etiqueta completa:

  $("body").removeAttr("style"); 

Solo usando:

 $('.tag-class').removeAttr('style'); 

o

 $('#tag-id').removeAttr('style'); 

¿Qué tal algo así como:

 var myCss = $(element).attr('css'); myCss = myCss.replace('background-color: '+$(element).css('background-color')+';', ''); if(myCss == '') { $(element).removeAttr('css'); } else { $(element).attr('css', myCss); } 

Prueba esto:

 $('#divID').css({"background":"none"});// remove existing $('#divID').css({"background":"#bada55"});// add new color here. 

Gracias

Si usa el estilo CSS, puede usar:

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

y luego reemplazar con:

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

Si no usa el estilo CSS y tiene un atributo en el elemento HTML, puede usar:

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

Usa mi complemento:

 $.fn.removeCss=function(all){ if(all===true){ $(this).removeAttr('class'); } return $(this).removeAttr('style') } 

Para su caso, úselo de la siguiente manera:

 $().removeCss(); 

o

 $().removeCss(false); 

si quieres eliminar también CSS definido en sus clases:

 $().removeCss(true); 

¡Este también funciona!

 $elem.attr('style',''); 

Esto es más complejo que algunas otras soluciones, pero puede ofrecer más flexibilidad en escenarios:

1) Cree una definición de clase para aislar (encapsular) el estilo que desea aplicar / eliminar de forma selectiva. Puede estar vacío (y para este caso, probablemente debería ser):

 .myColor {} 

2) use este código, basado en http://jsfiddle.net/kdp5V/167/ de esta respuesta por gilly3 :

 function changeCSSRule(styleSelector,property,value) { for (var ssIdx = 0; ssIdx < document.styleSheets.length; ssIdx++) { var ss = document.styleSheets[ssIdx]; var rules = ss.cssRules || ss.rules; if(rules){ for (var ruleIdx = 0; ruleIdx < rules.length; ruleIdx++) { var rule = rules[ruleIdx]; if (rule.selectorText == styleSelector) { if(typeof value == 'undefined' || !value){ rule.style.removeProperty(property); } else { rule.style.setProperty(property,value); } return; // stops at FIRST occurrence of this styleSelector } } } } } 

Ejemplo de uso: http://jsfiddle.net/qvkwhtow/

Advertencias:

  • No extensamente probado.
  • No se pueden incluir ! Directivas importantes u otras en el nuevo valor. Cualquiera de esas directivas existentes se perderá a través de esta manipulación.
  • Solo los cambios encontraron primero la aparición de un selector de estilo. No agrega ni quita estilos completos, pero esto podría hacerse con algo más elaborado.
  • Cualquier valor no válido / inutilizable será ignorado o arrojará un error.
  • En Chrome (al menos), las reglas CSS no locales (como en sitios cruzados) no se exponen a través del objeto document.styleSheets, por lo que no funcionará en ellas. Uno tendría que agregar una anulación local y manipular eso, teniendo en cuenta el comportamiento "primer encontrado" de este código.
  • document.styleSheets no es particularmente amigable con la manipulación en general, no espere que funcione para un uso agresivo.

Aislar el estilo de esta manera es de lo que se trata CSS, incluso si manipularlo no lo es. La manipulación de reglas CSS NO es de lo que se trata jQuery, jQuery manipula elementos DOM y usa selectores CSS para hacerlo.

Simple es barato en el desarrollo web. Recomiendo usar una cadena vacía al eliminar un estilo en particular

 $(element).style.attr = ' '; 

Prueba esto

 $(".ClassName").css('color',''); Or $("#Idname").css('color',''); 

¿Por qué no crear el estilo que deseas para eliminar una clase de CSS? Ahora puede usar: .removeClass() . Esto también abre la posibilidad de usar: .toggleClass()

(elimine la clase si está presente y agréguela si no está).

Agregar / eliminar una clase también es menos confuso para cambiar / solucionar problemas cuando se trata de problemas de diseño (en lugar de tratar de descubrir por qué desapareció un estilo en particular).