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

868

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 .

Alex
quelle
Versuchen Sie es besser mit addClass / removeClass, basierend auf Ihrer Funktionalität. Dies wirkt sich nicht auf andere Stile aus.
Prabhakaran

Antworten:

1333

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

$.css("background-color", "");
doppelter Piepton
quelle
4
@baacke Es ist eine Schande, wenn der vermeintliche "Standard" schrecklich veraltet ist und viel Entwicklungszeit verschwendet. Ich habe wenig Verständnis für Unternehmen, die veraltete Software verwenden. Ich verstehe nicht, warum ich zusätzliche Zeit für die Entwicklung für sie aufwenden sollte.
Andrew
33
Ich muss mich hier auf die Seite von @baacke stellen. Unser Kunde hat noch eine offizielle Mindestanforderung von IE6 (!!). Das Problem ist, dass ihre Kunden auf der ganzen Welt sind, einschließlich weniger entwickelter Länder. Die "Kunden des Kunden" verwenden möglicherweise sehr alte Computer, um mit unserem Kunden Geschäfte zu machen. Ein alter Browser muss also zumindest minimal unterstützt werden,
sonst
8
Ihr könnt nicht die Anforderungen einer Lösung festlegen, die ihr für einen Kunden entwickelt. Wenn dieser Client Unterstützung für einen älteren Browser wünscht oder benötigt, ist es Ihre Aufgabe, diesen bereitzustellen. Ihr redet über "wen interessiert das" und gibt wahren Ingenieuren einen schlechten Ruf.
Ed DeGagne
5
@EdDeGagne - Sie müssen ständig aufhören, ältere Versionen von IE zu unterstützen. Dies verbessert Ihre Codebasis und motiviert Besucher, keinen alten IE zu verwenden. Das einzig schwierige ist herauszufinden, wann Sie die Unterstützung fallen lassen können. Die Websites von Google haben viele Besucher. Wenn sie sich entschieden haben, einen alten IE zu löschen, können Sie ihnen vertrauen, dass dies eine gute Entscheidung war. Ein Unternehmen ging sogar so weit, seinen Benutzern zu sagen, dass es sich für sie mehr auszahlt, jedem alten IE-Benutzer einen modernen Computer zu kaufen, als seinen IE-Code weiter zu pflegen (genau das, was sie angeboten haben).
Janko-m
5
Ich hörte auf zu lesen, als ich sah, dass "IE8 auch unter Windows 7 immer noch der Standard ist"
Capsule
544

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.

ThinkingStiff
quelle
Dies ist eine nette Idee, aber fehlerhaft in jQuery, siehe den eingereichten Fehler: bugs.jquery.com/ticket/9500
Tosh
4
@Tosh Dieser Fehler wurde behoben 25.08.2011: bugs.jquery.com/…
ThinkingStiff
Ich weiß, aber zumindest in Version 1.7 ist es immer noch fehlerhaft, ich habe 1.8
Tosh
7
Dadurch werden auch alle anderen Eigenschaften im Stilattribut entfernt. Also wähle mit Bedacht aus.
Codierungsrhythmus
1
Das ist klug! Die akzeptierte Antwort würde nicht in Situationen funktionieren, in denen der von jquery erstellte Inline-Stil CSS-Stile überschreiben sollte, aber diese Methode funktioniert in allen Situationen einwandfrei.
Farzad YZ
170

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")
KrisWebDev
quelle
49

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');
Marwan
quelle
11
Der Typ verwendet bereits jQuery ... warum sollte er sich die Mühe machen, eine browserübergreifende Methode neu zu implementieren?!?
Billy
32
weil jquery nicht alles ist, weil sie oder vielleicht sollte ich sagen, dass jeder von uns als Entwickler wissen sollte, was Kompatibilität bedeutet und wie man so etwas mit Kernsprachen wie JavaScript macht, vielleicht ist dies meine Theorie, die ich bereits in meinem eigenen Framework erstellt habe Aufgrund meiner Kenntnisse über JavaScript lehne ich es ab, andere Dinge zu verwenden. Ich habe mein eigenes Konzept und meine Denkweise :) und übrigens danke für dein (-) ich musste nur Mehrwert schaffen :) und auch übrigens der Typ ist kein Typ, den sie Alex nennt
Marwan
1
Ich möchte nur darauf hinweisen, dass Sie document.all nicht überprüfen sollten, wenn Sie es nicht verwenden. Vielleicht sollten Sie es so überprüfen: if (elm.style.removeProperty) {elm.style.removeProperty (propertyName); } else if (elm.style.removeAttribute) {elm.style.removeAttribute (attributeName); }
Richard
Nun, Sie haben Recht, es sollte so sein, wenn (navigator.appName == "Microsoft Internet Explorer") document.body.style.removeAttribute ('Hintergrundfarbe'); sonst document.body.style.removeProperty ('Hintergrundfarbe'); und auf der anderen Seite ist Ihre Lösung auch richtig :) Danke für Ihre Nachricht
Marwan
9
Nein, Sie sollten auf jeden Fall überprüfen, ob diese Funktion vorhanden ist, anstatt nach einem Browser zu suchen. Was ist, wenn MS beschließt, den Funktionsnamen in der nächsten Version des IE zu ändern? Suchen Sie dann auch nach der Version des IE?
j03w
24

Dadurch wird das vollständige Tag entfernt:

  $("body").removeAttr("style");
SURJEET SINGH Bisht
quelle
Es ist eine grobe Lösung und würde nicht immer funktionieren, weil es den Stil des gesamten Elements entfernt
Konstantin Zadiran
19

Jede dieser jQuery-Funktionen sollte funktionieren:

$("#element").removeAttr("style");
$("#element").removeAttr("background-color") 
Mahesh Gaikwad
quelle
22
So entfernen Sie nur eine CSS-Eigenschaft:var cssObject = $('selector').prop('style'); cssObject.removeProperty('background-color');
Ilgaar
igaar - Ihre Lösung ist die sauberste. Ich habe es in eine '.each'-Schleife für einen Haufen von Tabellenzellen eingefügt, die "display: none" hatten, die gehen mussten, aber mit anderen Eigenschaften, die bleiben mussten. Es funktionierte einwandfrei, indem einfach das Display entfernt wurde: keines und der Rest übrig blieb.
Rob Von Nesselrode
9

Nur mit:

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

oder

$('#tag-id').removeAttr('style');
Alberto Cerqueira
quelle
Dadurch werden auch andere inline hinzugefügte Stile entfernt, nicht nur die Farbe.
LongInt
7

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);
}
nclu
quelle
Ich mag diesen! Sie entfernen die angegebene Eigenschaft und sonst nichts.
Joel
7

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);
Abdennour TOUMI
quelle
$(this).removeAttrist redundant und this.removeAttrsollte ausreichen.
Emile Bergeron
Does removeAttr entfernt auch classattr? Ich glaube nicht
Abdennour TOUMI
Ich spreche über das removeAttrInnere Ihres Plugins, wo thissich bereits ein jQuery-Element befindet. $(this)ist redundant.
Emile Bergeron
2
AH! OK OK .. @EmileBergeron, die alte jquery stellt thisals HTMLElementInstanz bereit, die dem jQuery-Element zugeordnet ist ... Wie Sie sehen, ist meine Antwort alt ... deshalb ... kann ich Ihnen trotzdem sagen, warum sie das ändern, sie tun das wegen der Pfeilfunktion, die in ES6 neu ist. .. und thiswird nutzlos und es wurde ersetzt durchevent.currentTarget
Abdennour TOUMI
1
Meinetwegen! ;) Komisch, wie 3 Jahre alt in der JS-Welt ist.
Emile Bergeron
7

Versuche dies:

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

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

Vielen Dank

uihelp
quelle
Das einzige Problem mit Ihrem "Vorhandenen entfernen" ist, dass es auch den Stylesheet-Hintergrund überschreibt, wenn es einen Satz gibt.
Jtbs
6

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);
Luis
quelle
6

2018

Dafür gibt es eine native API

element.style.removeProperty(propery)
pery mimon
quelle
2

Dieser funktioniert auch !!

$elem.attr('style','');
dazzafact
quelle
2

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

Neil Girardi
quelle
2
let el = document.querySelector(element)
let styles = el.getAttribute('style')

el.setAttribute('style', styles.replace('width: 100%', ''))
Kamil 'Ozean
quelle
1

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.

dkloke
quelle
1

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

$(element).style.attr = '  ';
Victor Michael
quelle
1

Versuche dies

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