Gewusst wie: Klasse umschalten
Wechseln Sie mit JavaScript zwischen dem Hinzufügen und Entfernen eines Klassennamens aus einem Element.
Klicken Sie auf die Schaltfläche, um den Klassennamen umzuschalten!
Klasse umschalten
Schritt 1) HTML hinzufügen:
Wechseln Sie zwischen dem Hinzufügen eines Klassennamens zum div-Element mit id="myDIV" (in diesem Beispiel verwenden wir eine Schaltfläche, um den Klassennamen umzuschalten).
Beispiel
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
Schritt 2) CSS hinzufügen:
Fügen Sie einen Klassennamen hinzu, um umzuschalten:
Beispiel
.mystyle {
width: 100%;
padding:
25px;
background-color: coral;
color: white;
font-size: 25px;
}
Schritt 3) JavaScript hinzufügen:
Holen Sie sich das <div>-Element mit id="myDIV" und wechseln Sie zwischen der Klasse "mystyle":
Beispiel
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.toggle("mystyle");
}
Tipp: Siehe auch So fügen Sie eine Klasse hinzu .
Tipp: Siehe auch So entfernen Sie eine Klasse .
Tipp: Erfahren Sie mehr über die classList- Eigenschaft in unserer JavaScript-Referenz.