So ändern Sie den Klassenstil eines Elements mit CSS

CSS (Cascading Style Sheets) ist eine unvermeidliche und wichtige Technologie in der Webentwicklung. Sie ermöglicht Entwicklern, den Stil von Webseiten von der Seitenstruktur zu trennen und so einen klareren und einfacher zu wartenden Code zu erzielen. In CSS ist die Klasse ein wichtiger Selektor, der es Entwicklern ermöglicht, Elementen bestimmte Attribute und Werte zuzuweisen, um benutzerdefinierte Stileffekte zu erzielen.

Manchmal müssen wir die Klasse eines Elements während JavaScript-Vorgängen dynamisch ändern. Wenn der Benutzer beispielsweise auf eine Schaltfläche klickt, muss der Stil der Seite basierend auf der Benutzereingabe oder dem Status des Systems geändert werden. In CSS ist das Ändern der Klasse eines Elements sehr einfach. Verwenden Sie einfach die Schnittstelle element.classList. Die

element.classList-Schnittstelle ist eine neue API in HTML5. Sie bietet praktische Methoden zum Betreiben der Elementklasse, wie z. B. add(), remove() und toggle() usw., die es Entwicklern ermöglichen, Elemente einfach zu formatieren. löschen, ändern und prüfen. Im Folgenden werde ich einige häufig verwendete ClassList-Schnittstellenmethoden und deren Verwendung vorstellen. Die Methode add() kann der Klassenliste des Elements eine neue Klasse hinzufügen. Wenn die Klasse bereits im Element vorhanden ist, ignoriert die Methode add() den Vorgang. Das Folgende ist die Syntax:

element.classList.add(class1 [, class2 [, ... [, classN]]])

Beispielcode:

1. const element = document.querySelector('#myDiv');
   element.classList.add('myClass');

remove()

remove()-Methode kann eine vorhandene Klasse aus der Klassenliste des Elements entfernen. Wenn die Klasse nicht im Element vorhanden ist, entfernen Sie (). Die Methode ignoriert diesen Vorgang. Das Folgende ist seine Syntax:

element.classList.remove(class1 [, class2 [, ... [, classN]]])

Beispielcode:

2. const element = document.querySelector('#myDiv');
   element.classList.remove('myClass');

toggle()

toggle()-Methode kann eine Klasse in der Klassenliste des Elements hinzufügen oder entfernen, abhängig davon, ob die Klasse bereits auf dem Element vorhanden ist. Wenn das Element nicht über die Klasse verfügt, fügt die Methode toggle() sie zur Klassenliste hinzu; wenn das Element bereits über die Klasse verfügt, entfernt die Methode toggle() sie aus der Klassenliste. Das Folgende ist die Syntax:

element.classList.toggle(class, true|false)

Wenn der zweite Parameterwert wahr ist, bedeutet dies, dass die Klasse zwangsweise hinzugefügt wird. Wenn der Wert falsch ist, bedeutet dies, dass die Klasse zwangsweise entfernt wird. Beispielcode: Die Methode

3. const element = document.querySelector('#myDiv');
   element.classList.toggle('myClass');

contains()

contains() kann prüfen, ob die angegebene Klasse in der Klassenliste des Elements enthalten ist. Wenn die Klasse vorhanden ist, gibt sie „true“ zurück . Das Folgende ist seine Syntax:

element.classList.contains(class)

Beispielcode:

4. const element = document.querySelector('#myDiv');
   if (element.classList.contains('myClass')) {
     console.log('包含该class');
   } else {
     console.log('不包含该class');
   }

Zusammenfassung:

Im Prozess der Webentwicklung ist die dynamische Änderung der Elementklasse eine sehr wichtige Technologie, die den interaktiven Effekt der Webseite reicher machen kann und lebendig. Die Schnittstelle element.classList bietet praktische Methoden zum Betreiben der Elementklasse und ermöglicht Entwicklern das einfache Hinzufügen, Löschen, Ändern und Überprüfen von Stilen. In diesem Artikel werden die vier häufig verwendeten ClassList-Schnittstellenmethoden add(), remove(), toggle() und contains() vorgestellt und ihre Verwendung erläutert. Ich hoffe, dass dies für alle hilfreich ist.

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Klassenstil eines Elements mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!