Classlist JavaScript | Erklärt

Ein JavaScript -DOM -Feature namens “KlasseKann verwendet werden, um die CSS -Klassen eines Elements zu stylen. Es handelt sich um eine schreibgeschützte JavaScript-Eigenschaft, die verwendet wird, um die in der Klasseneigenschaft eines Elements enthaltenen Informationen darzustellen. Insbesondere werden die Namen der CSS -Klassen von der angerufenen Classlist zurückgegeben.

In diesem Artikel veranschaulicht.

Was ist eine Klassenliste in JavaScript??

Der "KlasseIst das JavaScript-Dom-Lese-Attribut, das die Daten in der Klasseneigenschaft eines Elements darstellt. Es gibt die Namen der CSS -Klassen als Ausgabe an. Obwohl die Klassenliste nur schreibgeschützt ist, kann sie immer noch verwendet werden, um die Klassen zu ändern. Darüber hinaus können Sie die CSS -Klassen ändern, die einem HTML -Element mit dem Classlist -Objekt gegeben wurden.

Syntax

Befolgen Sie die angegebene Syntax, um das ClassList -Attribut zu verwenden:

Element.Klassenliste;

Hier das "ElementIst das HTML -Element.

Beispiel

In diesem Beispiel werden wir eine Schaltfläche erstellen, indem wir eine Klasse mit dem Namen “zuweisen“Taste”Und fügen Sie das Onclick () -Ereignis an, mit dem die Namen der zugewiesenen Klasse die Schaltfläche ausgeben, wenn sie ausgelöst werden:

Klicken Sie hier, um die zugewiesene Klasse der Schaltfläche anzuzeigen

Klicken Sie hier

Jetzt setzen wir den Grenzradius der Knopf als "2cm”In der CSS -Datei:

.Taste
Grenzradius: 2 cm;

Wir werden das Stylesheet mit der HTML -Datei mit der “verknüpfen" Schild:

In der JavaScript -Datei eine Funktion definieren “buttonclick ()So, dass beim Aufrufen des Dokuments, wenn es aufgerufen wird.GetElementById () -Methodenzugriffs -Schaltfläche mit seiner ID und dann die zugewiesene Klasse in einer ALERT () -Methode anzeigen:

Funktion ButtonClick ()
var klick = dokument.GetElementById ("Btn");
alarmieren (klicken.Klasse);

Ausgang

Schauen wir uns die Methoden der Classlist JavaScript -Eigenschaft an.

Was sind die Methoden der Classlist -Eigenschaft??

Es gibt einige Methoden der Classlist -Eigenschaft sind wie folgt:

• hinzufügen()
• entfernen()
• Umschalten()
• enthält ()
• Artikel()
• ersetzen()

Die untergegebene Tabelle umfasst die Beschreibung der genannten Methoden:

Methoden	Beschreibung
hinzufügen()	Mit der Methode add () können Sie ein oder mehrere Klassen zu einem Element hinzufügen.
entfernen()	Verwenden Sie die Methode von REME (REME (), um Klassen aus der Klassenliste des Elements zu entfernen.
Umschalten()	Die Umschaltung der bestimmten Klassennamen eines Elements wird mit der Methode Toggle () durchgeführt. Die angegebene Klasse wird mit einem Klick hinzugefügt und die Klasse wird mit einem anderen Klick entfernt.
enthält ()	Um zu überprüfen, ob die angegebene Klasse im Element vorhanden ist oder nicht, verwenden Sie die Methode content ().
Artikel()	Es wird verwendet, um die Namen der Klassen anzuzeigen, die im spezifischen Index vorhanden sind.
ersetzen()	Eine vorhandene Klasse kann durch eine neue Klasse mit der Methode ersetzen () ersetzt werden.

Jetzt werden wir einige häufig verwendete Methoden der Klassenliste diskutieren.

Beispiel 1: So verwenden Sie add () Methode der ClassList -Eigenschaft?

Wir werden neue Klassen auf der Schaltfläche hinzufügen, indem wir auf das Neue klicken “Fügen Sie der Schaltfläche Klasse hinzu”:

Fügen Sie der Schaltfläche Klasse hinzu

Erstellen Sie dann zwei Klassen “btncolor" Und "BOLDTEXTDas fügt die Hintergrundfarbe der Schaltflächen hinzu und fett den Text der Schaltfläche: fett:

.btncolor
Hintergrundfarbe: Blueviolet;

.BOLDTEXT
Schriftdicke: fett;

Definieren Sie in der JavaScript -Datei eine Funktion namens “AddClass ()"Das nennt das"hinzufügen()Methode der Klassenliste mit dem Namen der Klasse als Argument, das in der Klasse der Schaltfläche hinzugefügt wurde:

Funktion addClass ()
var newClass = document.GetElementById ("Btn").Klassenliste;
NEWCLASS.add ("btncolor");
NEWCLASS.add ("BoldText");

Die Ausgabe zeigt an, dass die neuen Klassen in der Schaltfläche hinzugefügt werden “Klicken Sie hier" Wenn "Fügen Sie der Schaltfläche Klasse hinzu”Wird geklickt. Klicken Sie dann auf die “Klicken Sie hierSchaltfläche zum Anzeigen der Liste der Klassen:

Beispiel 2: Verwenden Sie die Methode der REME () -Methode der ClassList -Eigenschaft?

Wir werden nun eine Klasse aus der Liste entfernen. Dazu erstellen wir eine neue Schaltfläche “Entfernen Sie die Klasse von der Taste”Und fügen Sie ein Onclick () -Event hinzu:

Entfernen Sie die Klasse von der Taste

Wir werden eine Funktion definieren “removeclass ()In JavaScript -Datei, um die Klasse zu entfernen "btncolor”Aus der Liste der Klassen:

Funktion removeclass ()
var newClass = document.GetElementById ("Btn").Klassenliste;
NEWCLASS.entfernen ("btncolor");

Wie Sie in der Ausgabe sehen können, die “Klicken Sie hier"Schaltfläche" eine Klasse mit dem Namen "angezeigt"TasteUnd dann, wenn das “Fügen Sie der Schaltfläche Klasse hinzu"Wird geklickt, zwei neue Klassen"BOLDTEXT" Und "btncolor”Werden der Liste hinzugefügt, und die Hintergrundfarbe der Schaltfläche wird ebenfalls geändert. Schließlich klicken Sie auf die “Entfernen Sie die Klasse von der Taste”Wird die" entfernen "btncolor”Klasse aus der Liste:

Beispiel 3: So verwenden Sie die Toggle () -Methode der ClassList -Eigenschaft?

Jetzt verwenden wir die Methode Toggle () zum Umschalten der Liste der Klassen auf einem Klick und entfernen auf einem anderen Klick:

Umschaltknopf

In der JavaScript -Datei eine Funktion definieren “ToggleClass ()Das fügt zuerst die Farbe der Schaltfläche auf einem Klick hinzu und entfernt sie dann auf dem anderen Klick:

Funktion ToggleClass ()
var newClass = document.GetElementById ("Btn").Klassenliste;
NEWCLASS.Toggle ("Btncolor");

Die entsprechende Ausgabe ist wie folgt:

Alle grundlegenden Richtlinien für die Klassenliste JavaScript -Eigenschaft wurden behandelt.

Abschluss

Der "KlasseIst das schreibgeschützte Attribut von JavaScript, das die Namen der CSS-Klassen angibt, die dem HTML-Element zugeordnet sind. Es ermöglicht es, die CSS -Klassen mit Hilfe seiner vordefinierten Methoden zu ändern, einschließlich add (), remove (), toggle () usw. In dieser Beschreibung haben wir die Classlist JavaScript-Eigenschaft und ihre Methoden mit detaillierten Beispielen veranschaulicht.