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

Ich ändere CSS mit jQuery und möchte das von mir hinzugefügte Styling basierend auf dem Eingabewert entfernen:

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

Wie kann ich das machen?
Beachten Sie, dass die obige Linie immer dann ausgeführt wird, wenn eine Farbe mit einem Farbwähler ausgewählt wird (dh wenn sich die Maus über ein Farbrad bewegt).

2. Hinweis: Ich kann dies nicht tun, css("background-color", "none")da dadurch das Standard-Styling aus den CSS- Dateien entfernt wird.
Ich möchte nur den background-colorvon jQuery hinzugefügten Inline-Stil entfernen .

Das Ändern der Eigenschaft in eine leere Zeichenfolge scheint die Aufgabe zu erledigen:

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

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

removeAttr( 'style' );

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

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

1. Setzen Sie die CSS-Eigenschaft auf ihren Standardwert (Anfangswert)

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

Siehe den Anfangswert für die CSS-Eigenschaft bei MDN . Hier ist der Standardwert transparent. Sie können inheritdas Attribut auch für mehrere CSS-Eigenschaften von seinem übergeordneten Element erben. In CSS3 / CSS4 können Sie auch verwenden initial, revertoder unsetdiese Schlüsselwörter haben möglicherweise eine eingeschränkte Browserunterstützung.

2. Entfernen der CSS-Eigenschaft

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

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

Beachten Sie jedoch, wie in der Dokumentation zu jQuery .css () angegeben , dass dies die Eigenschaft entfernt, jedoch Kompatibilitätsprobleme mit IE8 für bestimmte CSS-Kurzschrift-Eigenschaften, einschließlich Hintergrund, aufweist .

Durch Festlegen des Werts einer Stileigenschaft auf eine leere Zeichenfolge - z. B. $ ('# mydiv'). Css ('color', '') - wird diese Eigenschaft aus einem Element entfernt, wenn sie bereits direkt angewendet wurde, unabhängig davon, ob sie im HTML-Stil vorliegt Attribut, über die .css () -Methode von jQuery oder durch direkte DOM-Manipulation der Stileigenschaft. Ein Stil, der mit einer CSS-Regel in einem Stylesheet oder Element angewendet wurde, wird jedoch nicht entfernt. Warnung: Eine bemerkenswerte Ausnahme ist, dass für IE 8 und darunter das Entfernen einer Kurzform-Eigenschaft wie Rand oder Hintergrund diesen Stil vollständig aus dem Element entfernt, unabhängig davon, was in einem Stylesheet oder Element festgelegt ist .

3. Entfernen des gesamten Stils des Elements

.removeAttr("style")

Ich habe die Möglichkeit, ein Stilattribut mit reinem JavaScript zu entfernen, um Sie über den Weg von reinem JavaScript zu informieren

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

Dadurch wird das vollständige Tag entfernt:

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

Jede dieser jQuery-Funktionen sollte funktionieren:

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

Nur mit:

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

oder

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

Wie wäre es mit so 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);
}

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

Versuche dies:

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

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

Vielen Dank

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

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

und dann ersetzen durch:

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

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

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

2018

Dafür gibt es eine native API

element.style.removeProperty(propery)

Dieser funktioniert auch !!

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

Warum nicht den Stil festlegen, mit dem Sie eine CSS-Klasse entfernen möchten? Jetzt können Sie verwenden : .removeClass(). Dies eröffnet auch die Möglichkeit:.toggleClass()

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

Das Hinzufügen / Entfernen einer Klasse ist auch weniger verwirrend beim Ändern / Beheben von Problemen bei Layoutproblemen (im Gegensatz zum Versuch herauszufinden, warum ein bestimmter Stil verschwunden ist).

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

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

Dies ist komplexer als einige andere Lösungen, bietet jedoch möglicherweise mehr Flexibilität in Szenarien:

1) Erstellen Sie eine Klassendefinition, um das Styling, das Sie selektiv anwenden / entfernen möchten, zu isolieren (zu kapseln). Es kann leer sein (und sollte es in diesem Fall 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.
• Kann nicht enthalten ! Wichtig oder andere Richtlinien in dem neuen Wert. Solche bestehenden Richtlinien gehen durch diese Manipulation verloren.
• Nur Änderungen fanden zuerst das Auftreten eines styleSelector. Fügt nicht ganze Stile hinzu oder entfernt sie, aber dies könnte mit etwas Ausgefeilterem geschehen.
• Alle ungültigen / unbrauchbaren Werte werden ignoriert oder werfen einen Fehler.
• In Chrome (zumindest) werden nicht lokale (wie in standortübergreifenden) CSS-Regeln nicht über das document.styleSheets-Objekt verfügbar gemacht, sodass dies bei ihnen nicht funktioniert. Man müsste lokale Überschreibungen hinzufügen und diese manipulieren, wobei man das "zuerst gefundene" Verhalten dieses Codes berücksichtigt.
• document.styleSheets ist im Allgemeinen nicht besonders manipulationsfreundlich. Erwarten Sie nicht, dass dies bei aggressivem Gebrauch funktioniert.

Bei CSS geht es darum, das Styling auf diese Weise zu isolieren, auch wenn dies nicht der Fall ist. Das Manipulieren von CSS-Regeln ist NICHT das, worum es bei jQuery geht. JQuery manipuliert DOM-Elemente und verwendet dazu CSS-Selektoren.

Einfach ist billig in der Webentwicklung. Ich empfehle, beim Entfernen eines bestimmten Stils eine leere Zeichenfolge zu verwenden

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

Versuche dies

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