CSS-Klassen in JavaScript ändern
Immer wenn wir mit den DOM-Elementen innerhalb von JavaScript arbeiten, gibt es Zeiten und Situationen, in denen wir einige Interaktionen mit den HTML-Elementen bereitstellen müssen. Zum Beispiel das Ändern der Hintergrundfarbe eines Elements bei einem Benutzerklick, das Ausblenden eines Elements, das Ändern des Aussehens eines Elements usw. Dies kann meistens durch Ändern der Klassen erfolgen.
Die JavaScript-Sprache bietet Ihnen verschiedene Möglichkeiten, dies alles zu tun. Sehen wir uns verschiedene Methoden an, mit denen wir die CSS-Klassen aus den HTML-Elementen ändern können.
Verschiedene Möglichkeiten zum Ändern der CSS-Klasse in JavaScript
Unten haben wir ein HTML-Dokument, das aus einem einzelnen div-Element innerhalb des body-Tags besteht. Wir haben auch ein style-Tag, das eine ID und zwei Klassen enthält.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#dimensions{
width: 500px;
height: 500px;
}
.bg_1{
background-color: crimson;
}
.bg_2{
background-color: teal;
}
</style>
</head>
<body>
<div id="dimensions" class="dimensions bg_1">
<script>
let myDiv = document.getElementById('dimensions');
myDiv.addEventListener("click", function(e) {
});
</script>
</body>
</html>
Die ID mit dem Namen dimensions enthält die Breite und Höhe. bg_1 und bg_2 sind zwei Klassen, die die Eigenschaft background-color mit den Farben crimson und teal haben. Die dimensions und bg_1 werden auf das HTML-Element innerhalb des body-Tags angewendet.
Aus dem Code können Sie sehen, dass wir das Element div bereits in der Variablen myDiv gespeichert haben, indem wir die Methode document.getElementById() verwenden und die Element-ID (in diesem Fall dimensions) als String übergeben im Inneren.
Unser Ziel hier ist es, die Hintergrundfarbe des Elements div von Purpur zu Blaugrün zu ändern, indem wir die Klasse bg_1 durch bg_2 ändern. Dies geschieht nur, wenn der Benutzer das Element div aktiviert. Dazu haben wir auch das Event onClick mit der Methode addEventListener() auf der Variable myDiv im JavaScript hinzugefügt.
Wir werden verschiedene Wege beschreiten, um dies zu erreichen, wie unten gezeigt. Der gesamte Code, den wir unten schreiben werden, wird in die Methode addEventListener() unter dem Tag script eingefügt.
Mit der Methode className
Der einfachste Weg, eine CSS-Klasse in JavaScript zu ändern, ist die Methode className. Mit dieser Methode können Sie alle vorhandenen Klassen, die bereits im HTML-Element vorhanden sind, durch einige andere Klassen ersetzen. Sie können alle neuen Klassen, die Sie hinzufügen möchten, als Zeichenkette mit Leerzeichentrennung angeben.
myDiv.className = 'bg_2';
Beachten Sie, dass dadurch alle vorhandenen Klassen des Elements durch die neuen Klassen ersetzt werden.
Verwenden der Methoden classList.remove und classList.add
Mit Hilfe der Methode classList kann auf alle Klassen zugegriffen werden, die auf dem HTML-Element vorhanden sind. Mit classList.remove können Sie eine bestimmte Klasse entfernen und mit classList.add neue Klassen zum Element hinzufügen. In unserem Beispiel entfernen wir zuerst die Klasse bg_1 mit classList.remove und fügen dann eine neue Klasse, z. B. bg_2, mit classList.add wie unten gezeigt hinzu.
myDiv.classList.remove("bg_1");
myDiv.classList.add("bg_2");
So ändern wir CSS-Klassen mit diesen Methoden.
Mit der Methode classList.replace()
Eine andere Möglichkeit, die CSS-Klasse zu ändern, ist die Methode classList.replace(). Diese Methode benötigt zwei Argumente, das erste ist die vorhandene Klasse, die bereits auf dem Element vorhanden ist, das ersetzt werden soll (In diesem Fall bg_1), und das zweite ist die neue Klasse, die Sie dem Element hinzufügen möchten (In dieser Fall bg_2).
myDiv.classList.replace('bg_1', 'bg_2');
Dies sind einige der Methoden, mit denen wir die CSS-Klassen in JavaScript ändern können.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn