JavaScript classList ist eine DOM-Eigenschaft von JavaScript, die das Stylen der CSS-Klassen (Cascading Style Sheet) eines Elements ermöglicht. JavaScript classList ist eine schreibgeschützte Eigenschaft, die die Namen der CSS-Klassen zurückgibt. Es ist eine Eigenschaft von JavaScript im Vergleich zu den anderen Eigenschaften von JavaScript, zu denen style und className gehören. Die style-Eigenschaft gibt die Farbe oder einen anderen Stil des CSS-Klassenelements zurück, und className wird verwendet, um die Namen der in der CSS-Datei verwendeten Klassen zurückzugeben. Allerdings geben die Eigenschaften className und classList die Namen der Klassen zurück, die wir in der CSS-Datei verwendet haben, allerdings auf unterschiedliche Weise. Die Eigenschaft className gibt den Namen der Klassen in Form einer Zeichenfolge zurück, während die Eigenschaft classList von JavaScript gibt den Namen der Klassen in Form eines Arrays zurück.
Hier werden wir eine kurze Diskussion über JavaScript classList führen und auch seine Methoden mit ihren praktischen Implementierungen besprechen.
Beispiel einer JavaScript-Klassenlisteneigenschaft
Unten finden Sie ein Beispiel für die JavaScript-Eigenschaft „classList“, mit der wir den Klassenwert eines Elements erhalten.
10 von 60
<h3>Click on the button to get the class value </h3><br> function getClass() { var e = document.getElementById('btn'); alert(e.classList); } Die Ausgabe des obigen Codes ist unten dargestellt:
JavaScript-classList-Eigenschaft
Die Eigenschaft classList wird zur Darstellung des Werts der Klassenelemente verwendet, d. h. a DOMTokenList Objekt. Es handelt sich um eine schreibgeschützte Eigenschaft, aber wir können ihren Wert ändern, indem wir die im Programm verwendeten Klassen manipulieren. Die JavaScript-Klassenlisteneigenschaft besteht aus den folgenden Methoden, mit denen wir verschiedene Operationen an den Klassenelementen ausführen können:
Dies sind einige der Methoden, die in der JavaScript-Klassenliste verwendet werden.
Wir besprechen es einzeln.
classList.add()
Die Funktion, die zum Hinzufügen einer oder mehrerer Klassen zum CSS-Element verwendet wird.
Beispiel:
Das folgende Beispiel zeigt, wie man eine Klasse mit der Methode classList.add() hinzufügt:
.myClass {background: red;} <h3> Click on the button and add the class</h3> <br> function getClass() { var e = document.getElementById('Btn'); e.classList.add('myClass'); } Wenn der Benutzer im Code auf die Schaltfläche klickt, wird die neue Klasse zu den vorhandenen Klassen hinzugefügt. Die Ausgabe nach dem Klicken auf die Schaltfläche wird unten angezeigt:
Kali Linux-Terminal
classList.remove()
Die Funktion „remove()“ wird zum Entfernen der vorhandenen Klassen aus den Elementen verwendet.
Das folgende Beispiel zeigt, wie Sie eine oder mehrere Klassen mit der Methode classlist.remove() entfernen:
.myClass {background: red;} <h3> Click on the button and remove the class </h3> <br> function getClass() { var e = document.getElementById('Btn'); e.classList.remove('myClass'); } Wenn der Benutzer im obigen Code auf die Schaltfläche klickt, wird die bestimmte angegebene Klasse aus den vorhandenen CSS-Klassen entfernt. Die Ausgabe nach dem Klicken auf die Schaltfläche wird unten angezeigt:
Classlist.toggle()
Die Schaltfläche toggle() wird zum Umschalten von Klassen auf das Element verwendet. Es bedeutet, eine neue Klasse hinzuzufügen oder die vorhandenen Klassen zu entfernen.
Nachfolgend finden Sie ein Beispiel, das uns verdeutlicht, wie Sie die Methode toggle() zum Hinzufügen oder Entfernen von Klassen verwenden.
Beispiel:
.myClass1{background: red;} .myClass2 {background: blue;} <h3> Click on the button to add or remove the class</h3> <br> function get_toggle() { var e = document.getElementById('Btn'); e.classList.toggle('myClass2'); } Wenn der Benutzer im Code auf die Schaltfläche klickt, wird die Klasse zu den CSS-Klassen hinzugefügt oder daraus entfernt. Die Ausgabe nach dem Klicken auf die Schaltfläche wird unten angezeigt:
Classlist.contains()
Die Methode enthält() wird verwendet, um zu prüfen, ob die angegebene Klasse in den CSS-Klassen vorhanden ist, und gibt diesbezüglich den booleschen Wert als wahr oder falsch zurück.
Unten sehen Sie ein Beispiel, das zeigt, wie Sie mit der Methode „contains()“ nach einer Klasse suchen, ob sie existiert oder nicht:
Beispiel:
function getClass() { var e = document.getElementById('Btn'); document.write(e.classList.contains('myClass')+' <br>'+'myclass is the name of the class'); } Im obigen Code ist zu sehen, dass der Benutzer, wenn er auf die Schaltfläche klickt, prüft, ob die angegebene Klasse in den CSS-Klassen vorhanden ist. Wenn es vorhanden ist, wird ein boolescher Wert als wahr zurückgegeben. Andernfalls wird false zurückgegeben. Die Ausgabe des obigen Codes nach dem Klicken auf die Schaltfläche wird unten angezeigt:
Reverse-String Java
classlist.replace()
Die Methode replace() wird zum Ersetzen einer vorhandenen Klasse durch eine neue verwendet. Dies bedeutet nicht, dass die Klasse aus den Elementen entfernt wird, sondern dass die Eigenschaften der vorhandenen Klasse durch die Eigenschaften der neuen Klasse ersetzt werden.
Nachfolgend finden Sie ein Beispiel, anhand dessen wir verstehen, wie wir eine vorhandene Klasse durch eine neue Klasse ersetzen können:
Beispiel:
.myClass1 {background: red;} .myClass2 {background: blue;} function replace_Class() { var e = document.getElementById('Btn'); e.classList.replace('myClass1', 'myClass2'); } Wenn der Benutzer im obigen Code auf die Schaltfläche klickt, werden die vorhandenen Klasseneigenschaften durch die neuen Klasseneigenschaften ersetzt. Die Ausgabe nach dem Klicken auf die Schaltfläche wird unten angezeigt:
classList.item()
Die Funktion item() wird verwendet, um den Namen der Klasse zurückzugeben, die am angegebenen Indexwert vorhanden ist.
Unten finden Sie ein Beispiel, das uns verständlich macht, wie die Methode item() verwendet wird, um den Wert zurückzugeben:
Beispiel:
<h3> Click on the button to get the specified index value</h3><br> function get_Class() { var e = document.getElementById('Btn'); alert(e.classList.item(2)); } Wenn der Benutzer im Code auf die Schaltfläche klickt, wird die im angegebenen Index vorhandene Klasse angezeigt. Nachdem wir auf die Schaltfläche geklickt haben, erhalten wir den angegebenen Indexklassenwert, wie unten gezeigt:
Dies sind einige der Methoden des DOM-Objekts classList und alles über classList.