So ändern Sie die Klasse eines Elements in JavaScript: Best Practices 2025

So ändern Sie die Klasse eines Elements in JavaScript: Vom Anfänger zum Profi im Jahr 2025

Haben Sie sich jemals gewünscht, dass ein Button auf einer Website beim Klicken die Farbe ändert oder ein Menü sanft herausfährt? All das ist die Magie der Klassenänderung. Die Frage „How can I change an element's class with JavaScript?" ist eine der beliebtesten auf Stack Overflow (Zehntausende von Aufrufen). Und das zu Recht: Ohne diese Fähigkeit ist moderne Webentwicklung kaum vorstellbar.

Im Jahr 2025 sind Browser noch intelligenter geworden, aber das grundlegende Werkzeug ist dasselbe geblieben — classList. In diesem Artikel werden wir alle Möglichkeiten durchgehen, die Klasse eines Elements in JavaScript zu ändern: von der Klassik bis zu modernen Techniken. Sie erfahren, wie Sie Fehler vermeiden und Code schreiben, den Sie bei einem Vorstellungsgespräch zeigen können.

Warum ist die Klassenänderung wichtig?

Stellen Sie sich vor, Sie bauen ein Haus aus Bausteinen. Jeder Baustein ist ein HTML-Element, und die Klassen sind Aufkleber, die sagen: „Ich bin rot", „Ich bin animiert", „Ich bin versteckt". Wenn der Benutzer einen Button drückt, ändern Sie einfach den Aufkleber — und das Element erwacht zum Leben. Ohne Klassenänderungen müsste die gesamte Oberfläche neu gezeichnet werden, was langsam und traurig ist.

Im Jahr 2025 ist es die Klasse eines Elements in JavaScript zu ändern eine grundlegende Operation, die auf 9 von 10 interaktiven Websites verwendet wird. Von modalen Fenstern bis zum Dark Mode — alles basiert auf Klassen.

Reines JavaScript: classList — Ihr wichtigstes Werkzeug

Wenn Sie immer noch className und Zeichenkettenverkettung verwenden — hören Sie auf. Im Jahr 2025 gibt es classList. Dies ist eine integrierte API, die in allen modernen Browsern funktioniert (ja, sogar in Safari).

So sieht sie aus:

// Element abrufenconst button = document.querySelector('.my-button');

// Klasse hinzufügenbutton.classList.add('active');

// Klasse entfernenbutton.classList.remove('active');

// Klasse umschaltenbutton.classList.toggle('active');

// Prüfen, ob Klasse vorhanden istif (button.classList.contains('active')) {  console.log('Button ist aktiv!');}

Dieser Code ist die Basis, die jeder kennen sollte. Aber es gibt Nuancen, die guten Code in großartigen Code verwandeln.

Mehrere Klassen: Gleichzeitiges Hinzufügen und Entfernen

Möchten Sie mehrere Klassen gleichzeitig hinzufügen? Einfach:

element.classList.add('visible', 'animated', 'highlight');

Dasselbe beim Entfernen:

element.classList.remove('hidden', 'fade-out');

Dies funktioniert sogar im Internet Explorer 11 (falls Sie aus irgendeinem Grund alte Browser unterstützen). Im Jahr 2025 ist dies der Standard.

Klasse ersetzen: Eine durch eine andere ersetzen

Manchmal muss man eine Klasse durch eine andere ersetzen. Zum Beispiel das Umschalten eines Symbols von „Sonne" auf „Mond". Dafür gibt es die Methode replace:

element.classList.replace('icon-sun', 'icon-moon');

Wenn die Klasse icon-sun nicht vorhanden ist — passiert nichts, es wird kein Fehler ausgelöst. Dies ist sicher und lesbar.

Bedingtes Umschalten: toggle mit booleschem Flag

Die Methode toggle kann ein zweites Argument annehmen — einen booleschen Wert. Wenn true — wird die Klasse hinzugefügt, wenn false — entfernt. Dies ist praktisch, wenn Sie eine Klasse mit einem Zustand synchronisieren möchten:

const isDarkMode = true;element.classList.toggle('dark', isDarkMode); // fügt 'dark' hinzu

const isLoggedIn = false;element.classList.toggle('logged-in', isLoggedIn); // entfernt 'logged-in'

Dies ist viel sauberer, als ein if-else zu schreiben.

Und was ist mit className? Wann wird es benötigt?

Das gute alte className lebt noch, aber seine Zeit ist vorbei. Es ersetzt alle Klassen auf einmal:

element.className = 'new-class another-class';

Problem: Wenn das Element bereits Klassen hatte, werden diese gelöscht. Im Jahr 2025 wird className nur in zwei Fällen verwendet:

• Wenn eine vollständige