¿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 en función del 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 hacer el trabajo:

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

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 usar inheritvarias propiedades CSS para heredar el atributo de su padre. En CSS3 / CSS4, también puede usar initial, reverto unsetestas 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 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 directa del DOM 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, 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")

Obtuve la forma de eliminar un atributo de estilo con JavaScript puro solo para hacerle saber la forma de 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");

cualquiera de estas funciones jQuery debería funcionar:

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

Solo usando:

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

o

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

¿Qué tal algo 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);
}

Usa mi plugin:

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

Para su caso, úselo de la siguiente manera:

$(<mySelector>).removeCss();

o

$(<mySelector>).removeCss(false);

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

$(<mySelector>).removeCss(true);

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);

2018

hay una API nativa para eso

element.style.removeProperty(propery)

¡Este también funciona!

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

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

(elimine la clase si está presente y agréguela si no lo 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).

let el = document.querySelector(element)
let styles = el.getAttribute('style')

el.setAttribute('style', styles.replace('width: 100%', ''))

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

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

.myColor {}

2) use este código, basado en http://jsfiddle.net/kdp5V/167/ de esta respuesta de 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 ampliamente probado.
• No se pueden incluir directivas importantes u otras en el nuevo valor. Cualquiera de estas directivas existentes se perderá a través de esta manipulación.
• Solo cambia la primera aparición encontrada de un styleSelector. No agrega o elimina estilos enteros, 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 esto no funcionará en ellas. Uno tendría que agregar una anulación local y manipular eso, teniendo en cuenta el comportamiento "primero encontrado" de este código.
• document.styleSheets no es particularmente amigable con la manipulación en general, no esperes que esto 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 utiliza selectores CSS para hacerlo.

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

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

Prueba esto

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