Wie man Klassen hinzufügt

Lerne, wie man mit JavaScript Klassennamen zu Elementen hinzufügt.

Klicke auf die Schaltfläche, um mir die Klasse hinzuzufügen!

Füge die Klasse hinzu

Erster Schritt - Füge HTML hinzu:

Füge die Klassennamen hinzu id="myDIV" des div-Elements (im Beispiel verwenden wir einen Button, um die Klasse hinzuzufügen).

<button onclick="myFunction()">Versuche es aus</button>
<div id="myDIV">
  Dies ist ein DIV-Element.
</div>

Zweiter Schritt - Füge CSS hinzu:

Setze die Stile der angegebenen Klassennamen:

.mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
}

Dritter Schritt - Füge JavaScript hinzu:

Erhalte id="myDIV" des <div>-Elements, und füge ihm hinzu "mystyle" Klasse:

function myFunction() {
  var element = document.getElementById("myDIV");
  element.classList.add("mystyle");
}

Selbst ausprobieren

Verwandte Seiten

Tutorium:How to switch class

Tutorium:How to delete class

Referenzhandbuch:The classList property of the HTML DOM Element

Referenzhandbuch:The className property of the HTML DOM Element