So ändern Sie CSS -Klassen in JavaScript

Jeder Webentwickler beginnt seine Reise, indem er HTML, CSS und JavaScript lernt. HTML gibt unseren Webseiten Struktur. JavaScript ist eine Webprogrammiersprache. JavaScript bietet uns mit den CSS -Klassen an und arbeitet uns an Klasse Und Klassenname Eigenschaften, die verwendet werden können, um das Klassenattribut zu manipulieren.

Der Klassenname kann von JavaScript verwendet werden, um das angegebene Element zu manipulieren, während CSS diesen Klassennamen zum Stil dieses Elements verwendet. Daher werden wir in diesem Beitrag die Änderung der CSS -Klassen in JavaScript durchlaufen, aber zuerst die Umgebung festlegen, indem wir Elemente in HTML initialisieren und dieses Element dann in CSS stylen.

Umgebung eingerichtet

Erstellen wir ein Div -Element, das wie ein Behälter funktioniert, und platzieren Sie zwei Elemente in diesen Container. Einer wird der sein H2 Tag und der andere werden die sein P Schild. Um die CSS -Datei mit diesem HTML zu verknüpfen, haben wir a eingefügt Verknüpfung Tag in den Kopf und verwies auf unsere CSS -Datei im HREF -Attribut (Stil.CSS):

England

Die Hauptstadt Englands ist London

Um die Referenz der Referenz zu erhalten div Element In CSS haben wir das Klassenattribut verwendet. Wir haben ein gewisses Design im Div -Behälter sowie in den Elementen im Div -Container durchgeführt.

.Container
Hintergrundfarbe: RGB (54, 224, 207);

.Containerh2, p
Farbe: RGB (125, 104, 184);

Die Ausgabe sieht so aus:

Ändern Sie CSS -Klassen

Wie im einführenden Teil dieses Artikels erwähnt, bietet JavaScript uns an Klasse Und Klassenname Eigenschaften, die verwendet werden können, um das Klassenattribut zu manipulieren.Der Klassenname wird verwendet, um einen Wert direkt auf eine Klasse festzulegen, während wir mit der ClassList -Eigenschaft die folgenden Funktionen ausführen können:

• Klasse.hinzufügen() wird verwendet, um Klassenwerte hinzuzufügen
• Klasse.Umschalten() wird verwendet, um eine Klasse ein- oder auszuschalten
• Klasse.ersetzen() wird verwendet, um einen Klassenwert durch einen anderen Klassenwert zu ersetzen
• Klasse.enthält () wird verwendet, um zu überprüfen, ob ein Wert existiert oder nicht
• Klasse.entfernen() wird verwendet, um einen Klassenwert zu entfernen

Lassen Sie uns ein Beispiel geben, um die Classlist-Eigenschaft und ihre integrierten Methoden besser zu verstehen, und wir werden denselben HTML- und CSS-Code verwenden, den wir zuvor verwendet haben. Lassen Sie uns zunächst die Eigenschaft Klassenname verwenden, um der Klasse eine Klasse zuzuweisen H2 Attribut. Zu diesem Zweck haben wir uns auf eine Klasse in CSS verwiesen, die momentan nicht vorhanden ist, und geben ihr unten gezeigt:

.die Info
Hintergrundfarbe: weiß;
Grenze: 2px solide Schwarz;

Holen Sie sich als nächstes die Referenz der H2 Element mit dem QuerySelector ('H2') Dies wählt das erste H2 -Element im HTML -Code aus. Verwenden Sie als Nächst die Info Klasse zum H2 -Element. Der JavaScript -Code ist unten angegeben:

// Wählen Sie das erste H2 -Element aus
const myh2 = dokument.QuerySelector ('H2');
// Setzen Sie den Info -Kurs auf myH2
myh2.className = 'info';

Um auf diesen JavaScript -Code zu verweisen, verwenden Sie das Skript -Tag mit dem SRC -Attribut im HTML -Code im SRC -Attribut JavaScript -Dateinamen:

Der Code.JS ist unser JavaScript -Dateiname. Unsere Webseite sieht jetzt so aus:

Lassen Sie uns nun die CSS -Klassen mit dem ändern Klasse Eigentum. Wie bereits erwähnt, bietet uns die Classlist-Eigenschaft einige integrierte Methoden, mit denen wir CSS-Klassen ändern können. Wir werden die verwenden Klasse.hinzufügen() Dies fügt im folgenden Beispiel eine Klasse hinzu:

// Wählen Sie die erste DIV aus
const hidev = dokument.QuerySelector ('Div');
Hidev.Klasse.add ('versteckt'); // versteckte Klasse hinzugefügt

Gehen Sie als nächstes zur CSS -Datei und initialisieren Sie die versteckte Klasse, indem Sie die Anzeige nicht so erstellen, dass die DIV nicht sichtbar ist:

.versteckt
Anzeige: Keine;

Jetzt werden Sie sehen, dass das DIV -Element versteckt ist und Sie auf Ihrer Webseite nichts sehen werden:

Lassen Sie uns jetzt die verwenden Klasse.ersetzen() Methode, bei der wir die vorhandene versteckte Klasse durch eine andere Klassenverpackung ersetzen werden.

// Wählen Sie die erste DIV aus
const hidev = dokument.QuerySelector ('Div');
Hidev.Klasse.add ('versteckt'); // versteckte Klasse hinzugefügt
Hidev.Klasse.ersetzen ('versteckt', 'Wrap'); // Ersetzen Sie die versteckte Klasse durch Info -Kurs

Gehen Sie als nächstes in Ihre CSS -Datei und stylen Sie die Wrap -Klasse:

.wickeln
Schriftgröße: groß;

Sie werden jetzt sehen, dass unser Inhalt jetzt sichtbar ist und die Schriftgröße größer ist als zuvor:

Abschluss

JavaScript bietet uns zwei Eigenschaften, mit denen wir CSS -Klassen ändern können Klasse Und Klassenname Eigentum. Der Klassenname Eigenschaft wird verwendet, um einen Wert auf eine CSS -Klasse direkt festzulegen, während die Klasse gibt uns einige integrierte Methoden, um die CSS-Klassen zu manipulieren.

Zum Beispiel die Klasse.hinzufügen() gibt uns die Möglichkeit, Klassenwerte hinzuzufügen, Klasse.entfernen() gibt uns die Möglichkeit, eine Klasse zu entfernen, Klasse.Umschalten() gibt uns die Möglichkeit, einer Klasse umzuschalten und die Klasse.ersetzen() gibt uns die Möglichkeit, einen Klassenwert durch eine andere Klasse zu ersetzen.

In diesem Beitrag haben wir gesehen, wie CSS -Klassen mit JavaScript modifiziert werden, indem wir zwei Eigenschaften von JavaScript kennenlernen Klasse Und Klassenname.