Come posso rimuovere uno stile aggiunto con la funzione .css ()?

Sto cambiando CSS con jQuery e desidero rimuovere lo stile che sto aggiungendo in base al valore di input:

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

Come posso fare questo?
Si noti che la riga sopra viene visualizzata ogni volta che si seleziona un colore utilizzando un selettore colore (cioè quando il mouse si sposta su una ruota dei colori).

2a nota: non posso farlo css("background-color", "none")perché rimuoverà lo stile predefinito dai file CSS .
Voglio solo rimuovere lo background-colorstile in linea aggiunto da jQuery .

La modifica della proprietà in una stringa vuota sembra fare il lavoro:

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

La risposta accettata funziona ma lascia un styleattributo vuoto sul DOM nei miei test. Non è un grosso problema, ma questo rimuove tutto:

removeAttr( 'style' );

Ciò presuppone che si desideri rimuovere tutto lo stile dinamico e tornare allo stile del foglio di stile.

Esistono diversi modi per rimuovere una proprietà CSS utilizzando jQuery:

1. Impostazione della proprietà CSS sul valore predefinito (iniziale)

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

Vedere il valore iniziale per la proprietà CSS su MDN . Qui il valore predefinito è transparent. Puoi anche usare inheritdiverse proprietà CSS per ereditare l'attributo dal suo genitore. In CSS3 / CSS4, puoi anche usare initial, reverto unsetma queste parole chiave potrebbero avere un supporto limitato per il browser.

2. Rimozione della proprietà CSS

Una stringa vuota rimuove la proprietà CSS, ad es

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

Ma attenzione, come specificato nella documentazione jQuery .css () , questo rimuove la proprietà ma ha problemi di compatibilità con IE8 per alcune proprietà stenografiche CSS, incluso lo sfondo .

Impostando il valore di una proprietà di stile su una stringa vuota, ad esempio $ ('# mydiv'). Css ('color', '') - rimuove quella proprietà da un elemento se è già stata direttamente applicata, sia nello stile HTML attributo, tramite il metodo .css () di jQuery o tramite la manipolazione DOM diretta della proprietà style. Tuttavia, non rimuove uno stile che è stato applicato con una regola CSS in un foglio di stile o in un elemento. Attenzione: un'eccezione notevole è che, per IE 8 e versioni precedenti, la rimozione di una proprietà abbreviata come bordo o sfondo rimuoverà completamente quello stile dall'elemento, indipendentemente da ciò che è impostato in un foglio di stile o elemento .

3. Rimozione dell'intero stile dell'elemento

.removeAttr("style")

Ho trovato il modo di rimuovere un attributo di stile con JavaScript puro solo per farti conoscere il modo di JavaScript puro

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

Questo rimuoverà il tag completo:

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

una di queste funzioni jQuery dovrebbe funzionare:

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

Basta usare:

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

o

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

Che ne dici di qualcosa come:

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 il mio plugin:

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

Per il tuo caso, usalo come segue:

$(<mySelector>).removeCss();

o

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

se vuoi rimuovere anche i CSS definiti nelle sue classi:

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

Prova questo:

$('#divID').css({"background":"none"});// remove existing

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

Grazie

Se usi lo stile CSS, puoi usare:

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

e quindi sostituire con:

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

Se non usi lo stile CSS e hai un attributo nell'elemento HTML, puoi usare:

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

2018

c'è un'API nativa per questo

element.style.removeProperty(propery)

Anche questo funziona !!

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

Perché non creare lo stile che desideri rimuovere una classe CSS? Ora è possibile utilizzare: .removeClass(). Ciò apre anche la possibilità di utilizzare:.toggleClass()

(rimuovi la classe se è presente e aggiungila se non lo è.)

L'aggiunta / rimozione di una classe è anche meno confusa per cambiare / risolvere i problemi quando si affrontano i problemi di layout (invece di cercare di capire perché un particolare stile è scomparso.)

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

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

Questo è più complesso di alcune altre soluzioni, ma può offrire una maggiore flessibilità negli scenari:

1) Crea una definizione di classe per isolare (incapsulare) lo stile che desideri applicare / rimuovere selettivamente. Può essere vuoto (e in questo caso, probabilmente dovrebbe essere):

.myColor {}

2) utilizzare questo codice, basato su http://jsfiddle.net/kdp5V/167/ da questa risposta di 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
                }
            }
        }
    }
}

Esempio di utilizzo: http://jsfiddle.net/qvkwhtow/

Avvertenze:

• Non ampiamente testato.
• Non è possibile includere ! Importanti o altre direttive nel nuovo valore. Qualsiasi direttiva esistente verrà persa attraverso questa manipolazione.
• Cambia solo la prima occorrenza trovata di uno styleSelector. Non aggiunge o rimuove interi stili, ma ciò potrebbe essere fatto con qualcosa di più elaborato.
• Qualsiasi valore non valido / inutilizzabile verrà ignorato o verrà generato un errore.
• In Chrome (almeno), le regole CSS non locali (come nel sito) non sono esposte attraverso l'oggetto document.styleSheets, quindi non funzionerà su di esse. Si dovrebbe aggiungere una sostituzione locale e manipolarla, tenendo presente il comportamento "prima trovato" di questo codice.
• document.styleSheets non è particolarmente amichevole con la manipolazione in generale, non aspettarti che funzioni per un uso aggressivo.

Isolare lo stile in questo modo è ciò di cui tratta CSS, anche se manipolarlo non lo è. Manipolare le regole CSS NON è tutto ciò che riguarda jQuery, jQuery manipola gli elementi DOM e utilizza i selettori CSS per farlo.

Semplice è economico nello sviluppo web. Consiglio di usare una stringa vuota quando si rimuove uno stile particolare

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

Prova questo

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