jQuery: Ändern Sie vorübergehend einen Stil und setzen Sie ihn dann auf die ursprüngliche Klasse zurück

Lesezeit: 4 Minuten

Programmiertool

Angenommen, ich habe eine Klasse namens testThing:

.testThing
{
   background-color:#000000;
   float:left;
   height:50px;
   width:50px;
}

Und ich möchte in der Lage sein, eine Änderung der Hintergrundfarbe auf ein beliebiges Steuerelement dieser Klasse auf Knopfdruck zu testen:

function setColor(someColor) 
{
   jQuery('.testThing').css('background-color', someColor);
}

Aber ich möchte, dass der Benutzer in der Lage ist, basierend auf dem, was die Klasse hat, auf die ursprüngliche Farbe zurückzusetzen (ein weiterer Klick auf die Schaltfläche):

function resetClass()
{
   jQuery('#currentColor').removeClass('testThing');
   jQuery('#currentColor').addClass('testThing');
}

Scheint so zu funktionieren (wenn auch nicht der beste Weg, dies zu tun), aber die Hintergrundfarbe des Steuerelements wird nicht auf den ursprünglichen Wert zurückgesetzt, der in dieser Klasse enthalten ist.

Jetzt muss ich entweder herausfinden, warum das Entfernen zum Hinzufügen es nicht zurücksetzt ODER einfach eine bessere Möglichkeit, es zu tun … da es albern erscheint, die Klasse zu entfernen und zu lesen …

Sie müssen nicht jQuery(…) verwenden, Sie können einfach $(..)

– Gab Royer

27. Juni 2009 um 19:29 Uhr
Sie tun dies, wenn mehrere Bibliotheken verwendet werden, wie z. B. Microsofts Ajax-Ding oder Prototyp. Ich mache das nur für den Fall, obwohl ich höchstwahrscheinlich nur jquery verwenden werde.

– Programmiertool

28. Juni 2009 um 20:14 Uhr

Ich weiß, das ist alt, aber Sie können den Wert einfach auf eine leere Zeichenfolge setzen, um Ihren benutzerdefinierten Stil wie folgt zu entfernen:

// set
$(this).css('background-color', '#000000');

// reset
$(this).css('background-color', '');

Danke – genau was ich brauchte 🙂

– Bojangles

26. Oktober 2010 um 12:55 Uhr
Danke Jscheel! Dies funktioniert sehr gut und zerstört keine anderen (bereits vorhandenen) Stile.

– Robert

7. September 2012 um 19:24 Uhr
Immer noch nützlich asf. Vielen Dank.

– M1X

7. November 2015 um 22:24 Uhr

Gab Royer

Jquery fügt CSS in das style-Attribut ein, das eine höhere Priorität hat als das, was in Ihrer CSS-Datei steht. Sie ändern Ihr CSS-Dokument mit dieser Funktion nicht und daher hat das Hinzufügen und Entfernen und Hinzufügen der Klasse keine Auswirkung, da sie überhaupt nicht geändert wurde!

Sie sollten die gleiche Funktion verwenden, aber diesmal die Hintergrundfarbe auf Schwarz setzen.

function reset(this)
{
  $(this).css('background-color', '#000000');
}

Oder entfernen Sie einfach das Stilattribut

function reset(this)
{
  $(this).removeAttr('style');
}

Dies funktioniert nur, wenn Sie keine anderen Stileinstellungen haben, die Sie beibehalten möchten

– jwl

27. Juni 2009 um 19:43 Uhr
Nun, es löscht jede mit Jquery vorgenommene Änderung, was genau das ist, was er hier wollte. Den ersten könnte er aber noch gebrauchen.

– Gab Royer

27. Juni 2009 um 19:55 Uhr
Denken Sie daran, dass removeAttribute() für jquery nicht mehr funktioniert, verwenden Sie stattdessen removeAttr()!

– Jepser Bernardino

10. August 2011 um 2:40 Uhr
Dadurch werden jedoch alle Stile auf dem Element entfernt, wodurch es effektiv weiß wird! Das OP fragte, wie der ursprüngliche Stil wiederhergestellt werden könne. Warum nicht den ursprünglichen Stil in einer gefälschten Element-ID zwischenspeichern und später von dort wiederherstellen? Was ist, wenn das Element eine alternative Zeile in einer Gridview ist, die jede zweite Zeile unterschiedliche Farben hat?

– Fandango68

15. Dezember 2016 um 6:29 Uhr
@ Fandango68 und alle anderen Betroffenen, das hat in meinem Fall perfekt funktioniert. Es entfernt nicht user agent Stile, es werden nur Stile entfernt, die auf das Element speziell als Attribut für dieses Element angewendet wurden (AKA-Stile, die über Javascript oder ein beliebiges Inline-Styling angewendet wurden).

– Ethan Moore

16. Juli 2021 um 15:38 Uhr

Wie wäre es mit toggleClass("testThing")? Ich verwende es, wenn mehr als eine Eigenschaft geändert werden muss.

http://api.jquery.com/toggleClass/

Ich verstehe nicht, warum dies die ultimative Antwort ist. Ich fand diese Antwort nützlich, wenn wir ein komplexes CSS haben, das nur für bestimmte Bedingungen gilt, die gleich danach zurückgesetzt werden müssen.

– Hoon

26. Juni 2017 um 16:30 Uhr
Ich bin mir nicht sicher, ob ich Ihren Kommentar verstehe. Ich sagte dasselbe wie Sie: Dies ist nützlich, wenn Sie mehr als eine CSS-Eigenschaft gleichzeitig ändern möchten.

– Alexandra

27. Juni 2017 um 17:37 Uhr
Entschuldigung, ich habe meinen Kommentar noch einmal gelesen und einen Fehler gefunden. Es ist, warum dies nicht die ultimative Antwort ist. Nicht ‘warum ist das …’.

– Hoon

27. Juni 2017 um 23:08 Uhr

Es ist besser, einfach eine andere Klasse hinzuzufügen, die den Stil überschreibt, den Sie ändern möchten, und ihn dann zu entfernen. Es schlägt Informationen zum Hardcoding-Stil in js. Das einzige Problem ist, dass Sie sicherstellen müssen, dass die hinzugefügte Klasse von höherer Ordnung ist, damit das Element den Stil von ihr und nicht von der vorhandenen Klasse übernimmt, aber dies ist nicht schwer sicherzustellen.

12985400cookie-checkjQuery: Ändern Sie vorübergehend einen Stil und setzen Sie ihn dann auf die ursprüngliche Klasse zurück

#Abfrage #CSS