Wie kann ich einen mit der .css () - Funktion hinzugefügten Stil entfernen?

Die akzeptierte Antwort funktioniert, hinterlässt jedoch ein leeres style-Attribut im DOM in meinen Tests. Keine große Sache, aber das entfernt alles:

removeAttr( 'style' );

Dies setzt voraus, dass Sie alle dynamischen Formatierungen entfernen und zum Stylesheet-Stil zurückkehren möchten.

Es gibt mehrere Möglichkeiten, eine CSS-Eigenschaft mit jQuery zu entfernen:

1. Festlegen der CSS-Eigenschaft auf ihren Standardwert (Anfangswert)

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

Siehe Anfangswert für die CSS-Eigenschaft in MDN . Hier ist der Standardwert transparent. Sie können inherit auch für mehrere CSS-Eigenschaften verwenden, um das Attribut von seinem übergeordneten Element zu übernehmen. In CSS3/CSS4 können Sie auch initial , revert oder unset verwenden, diese Browser unterstützen jedoch möglicherweise eine eingeschränkte Unterstützung.

2. Entfernen der CSS-Eigenschaft

Eine leere Zeichenfolge entfernt die CSS-Eigenschaft, d. H.

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

Beachten Sie jedoch, wie in jQuery .css () documentation angegeben, dies entfernt die Eigenschaft, hat jedoch Kompatibilitätsprobleme mit IE8 für bestimmte CSS-Kurzschreibeigenschaften, einschließlich background.

Festlegen des Werts einer Stileigenschaft auf eine leere Zeichenfolge - z. B. . $ ('# mydiv'). css ('color', '') - entfernt diese Eigenschaft aus einem Element Wenn es bereits direkt angewendet wurde, ob im HTML-Stil Attribut, über die .css () -Methode von jQuery oder über direktes DOM Manipulation der style-Eigenschaft. Es entfernt jedoch keine Stil, der mit einer CSS-Regel in einem Stylesheet oder .__ angewendet wurde. Element. Warnung: Eine bemerkenswerte Ausnahme ist, dass für IE 8 und darunter Wenn Sie eine Abkürzungseigenschaft wie Rahmen oder Hintergrund entfernen, wird Entfernen Sie diesen Stil vollständig aus dem Element, unabhängig davon, was festgelegt ist in einem Stylesheet oder Element.

3. Den gesamten Stil des Elements entfernen

.removeAttr("style")

Ich habe den Weg gefunden, ein Stilattribut mit reinem JavaScript zu entfernen, um Ihnen den Weg von reinem JavaScript zu zeigen 

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

jede dieser jQuery-Funktionen sollte funktionieren:

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

Dadurch wird das komplette Tag entfernt: 

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

Versuche dies:

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

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

Vielen Dank

Wie wäre es mit etwas wie:

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

Nur mit:

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

oder 

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

Verwenden Sie mein Plugin: 

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

Verwenden Sie es für Ihren Fall wie folgt: 

$(<mySelector>).removeCss();

oder 

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

wenn Sie auch CSS entfernen möchten, das in seinen Klassen definiert ist: 

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

Wenn Sie einen CSS-Stil verwenden, können Sie Folgendes verwenden:

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

und dann ersetzen mit:

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

Wenn Sie keinen CSS-Stil verwenden und Attribute im HTML-Element haben, können Sie Folgendes verwenden:

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

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

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

Warum machen Sie nicht den Stil, den Sie entfernen möchten, um eine CSS-Klasse zu entfernen? Jetzt können Sie verwenden: .removeClass(). Dies eröffnet auch die Möglichkeit der Verwendung von: .toggleClass()

(Entfernen Sie die Klasse, falls vorhanden, und fügen Sie sie hinzu, falls dies nicht der Fall ist.) 

Das Hinzufügen/Entfernen einer Klasse ist auch weniger verwirrend für Änderungen/Problemlösungen bei Layoutproblemen (anstatt zu versuchen herauszufinden, warum ein bestimmter Stil verschwunden ist) 

Das funktioniert auch !!

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

Versuche dies

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

Simple ist billig in der Webentwicklung. Ich empfehle die Verwendung einer leeren Zeichenfolge beim Entfernen eines bestimmten Stils 

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

2018

dafür gibt es eine native API 

element.style.removeProperty(propery)

Dies ist komplexer als einige andere Lösungen, kann jedoch in Szenarien mehr Flexibilität bieten:

1) Erstellen Sie eine Klassendefinition, um das Styling, das Sie anwenden oder entfernen möchten, selektiv zu isolieren (einzukapseln). Es kann leer sein (und für diesen Fall sollte es wahrscheinlich sein):

.myColor {}

2) Verwenden Sie diesen Code basierend auf http://jsfiddle.net/kdp5V/167/ aus dieser Antwort von 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
                }
            }
        }
    }
}

Anwendungsbeispiel: http://jsfiddle.net/qvkwhtow/

Vorsichtsmaßnahmen: 

• Nicht ausgiebig getestet.
• ! Important oder andere Anweisungen können nicht in den neuen Wert aufgenommen werden. All diese bestehenden Richtlinien gehen durch diese Manipulation verloren.
• Nur Änderungen, die beim ersten Auftreten eines styleSelector gefunden wurden. Fügt keine ganzen Stile hinzu oder entfernt sie, aber dies könnte mit etwas aufwendigerem ausgeführt werden.
• Alle ungültigen/unbrauchbaren Werte werden ignoriert oder werfen einen Fehler.
• In Chrome (zumindest) werden nicht-lokale (wie in standortübergreifenden) CSS-Regeln nicht durch das document.styleSheets-Objekt verfügbar gemacht, sodass dies für sie nicht funktioniert. Man müsste eine lokale Überschreibung hinzufügen und diese manipulieren, wobei das "zuerst gefundene" Verhalten dieses Codes zu berücksichtigen ist.
• document.styleSheets ist im Allgemeinen nicht besonders manipulationsfreundlich. Erwarten Sie nicht, dass dies bei aggressivem Einsatz funktioniert.

CSS zu isolieren, ist das, worum es bei CSS geht, auch wenn es nicht manipuliert wird. Bei der Bearbeitung von CSS-Regeln geht es NICHT um jQuery. JQuery bearbeitet DOM-Elemente und verwendet dazu CSS-Selektoren.