In diesem Artikel lernst du, wie du CSS-Klassen mit dem JavaScript-Objekt classList in deinem DOM-Projekt änderst. Über das Objekt classList passt du die CSS-Klassen an, die einem HTML-Element zugewiesen sind.
<!DOCTYPE html>
<html>
<head>
<title>Mon titre</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
.colorText {
color: purple;
}
.boldText {
font-weight: bold;
}
.bigText {
font-size: 35px;
}
</style>
</head>
<body>
<p id="myText">
Hello World!
</p>
</body>
</html>Gestalten wir den Text jetzt über die Eigenschaft classList um und wenden deine CSS-Klassen an.
Die classList-Methoden .add() und .contains() verwenden
Lege eine Datei index.js an, hol dir eine Referenz auf dein Absatz-Element und rufe die Methode classList.add() auf:
index.js
const myText = document.getElementById('myText');
myText.classList.add('colorText');Die eingebaute Methode classList.add() weist deinem HTML-Element eine Klasse zu. In diesem Fall erscheint der Text im Absatz ab sofort in Violett.
Ob die CSS-Klasse an deinem Absatz-Element hängt, prüfst du mit der Methode classList.contains(), die einen Boolean zurückgibt:
const myText = document.getElementById('myText');
console.log(myText.classList.contains('colorText')); // trueDa die CSS-Klasse colorText an deinem Absatz-Element hängt, gibt der Aufruf true zurück.
Die classList-Methoden .item() und .remove() verwenden
Füge deinem Absatz-Element in der Datei index.js weitere CSS-Klassen hinzu:
index.js
const myText = document.getElementById('myText');
myText.classList.add('boldText');
myText.classList.add('bigText');
console.log(myText.classList); // ['colorText', 'boldText', 'bigText'];Die Eigenschaft classList legt jede zusätzliche Klasse in einem Array ab. Gibst du myText.classList in der Konsole aus, bekommst du ein Array mit deinen CSS-Klassen.
Um den Index einer bestimmten CSS-Klasse im Array abzufragen, rufst du die Methode classList.item() auf:
const myText = document.getElementById('myText');
myText.classList.item('boldText'); // 2Eine CSS-Klasse entfernst du mit der Methode classList.remove():
const myText = document.getElementById('myText') ;
myText.classList.remove('bigText') ;
console.log(myText.classList) ; // ['colorText', 'boldText'];Gibst du myText.classList danach erneut in der Konsole aus, fehlt die entfernte CSS-Klasse im Array und greift auch nicht mehr auf deinem Absatz-Element.
Jetzt, wo du CSS-Klassen hinzufügen, prüfen und entfernen kannst, sehen wir uns an, was die übrigen classList-Methoden können.
Die classList-Methode .toggle() im Griff
Statt classList.add() und classList.remove() nebeneinander aufzurufen, kannst du die Methode classList.toggle() nehmen:
Dafür hängst du in deiner Datei index.js einen Event-Listener an einen Button:
index.js
textButton.addEventListener('click', () => {
myText.classList.toggle('newFont');
});Bei jedem Klick fügt classList.toggle() die CSS-Klasse hinzu, wenn sie nicht im Array classList steht, und gibt true zurück. Steht die Klasse schon drin, entfernt die Methode sie und gibt false zurück.
const anotherClass = myText.classList.toggle('newSize');
console.log(anotherClass); // true --> die Klasse wurde hinzugefügtDu kannst der Methode classList.toggle() als zweites, optionales Argument auch einen Boolean mitgeben. Je nachdem, wie dieses zweite Argument ausgewertet wird, fügt sie die CSS-Klasse hinzu oder entfernt sie:
const bool = false;
let firstToggle = myText.classList.toggle('newSize', bool);
console.log(firstToggle);
// false, 'newFont' existiert bereits und wird aus dem classList-Array entfernt
let secondToggle = shadesEl.classList.toggle('newColor', !bool);
console.log(secondToggle);
// true, 'newColor' existiert nicht und die Klasse wird hinzugefügt.Mit der Methode classList.toggle() fügst du CSS-Klassen hinzu und entfernst sie wieder, ob sie im Array stehen oder nicht, und das mit weniger Codezeilen.
Fazit
Die Eigenschaft classList ist der schnellere und funktionsreichere Weg, deine HTML-Elemente und ihre CSS-Klassen in JavaScript zu ändern.
Mehr dazu findest du im Artikel über das DOM und wie du es in JavaScript änderst.
