HTMLCSSJavaScriptIndexRoadmapImpressum

CSS-Klassen mit Events verändern

Statt Styles direkt in JavaScript zu setzen, änderst du oft nur CSS-Klassen. Das HTML bleibt sauber, und das Aussehen steuerst du weiter über CSS.

Dafür nutzt du classList: damit kannst du Klassen hinzufügen, entfernen oder umschalten – zum Beispiel beim Klick auf einen Button.

Klassen hinzufügen

Mit classList.add() hängst du eine Klasse an ein Element. War die Klasse schon da, passiert nichts Schlimmes – sie wird nicht doppelt gesetzt.

Beispiel: Beim Klick soll eine Box die Klasse aktiv bekommen und dadurch eine andere Farbe zeigen.

HTML – Button und Box

1<button id="addBtn">Klasse hinzufügen</button>
2<div id="box">Box</div>

CSS – Klasse aktiv

1#box {
2    padding: 12px;
3    border: 2px solid #1e6bd9;
4    border-radius: 8px;
5}
6
7#box.aktiv {
8    background-color: #1e6bd9;
9    color: white;
10}

JavaScript – classList.add()

1const box = document.getElementById("box");
2const button = document.getElementById("addBtn");
3
4button.addEventListener("click", function() {
5    box.classList.add("aktiv");
6});

Ausgabe

Box

Noch keine Klasse "aktiv"

Klassen entfernen

Mit classList.remove() nimmst du eine Klasse wieder weg. Das Element verliert dann die zugehörigen Styles.

Beispiel: Die Box ist zuerst aktiv. Ein Klick entfernt aktiv – die Hervorhebung verschwindet.

HTML – Box mit Klasse aktiv

1<button id="removeBtn">Klasse entfernen</button>
2<div id="box" class="aktiv">Box</div>

CSS – Klasse aktiv

1#box {
2    padding: 12px;
3    border: 2px solid #1e6bd9;
4    border-radius: 8px;
5}
6
7#box.aktiv {
8    background-color: #1e6bd9;
9    color: white;
10}

JavaScript – classList.remove()

1const box = document.getElementById("box");
2const button = document.getElementById("removeBtn");
3
4button.addEventListener("click", function() {
5    box.classList.remove("aktiv");
6});

Ausgabe

Box

Klasse "aktiv" ist noch da

Klassen mit toggle() umschalten

classList.toggle() ist ein Schalter: Ist die Klasse nicht da, wird sie hinzugefügt. Ist sie schon da, wird sie entfernt.

Das sparst du dir lange if/else-Blöcke – ein Klick reicht, um den Zustand zu wechseln. Sehr praktisch für Menüs, Dark Mode oder Ein-/Ausblenden.

HTML – Button und Box

1<button id="toggleBtn">Umschalten</button>
2<div id="box">Box</div>

CSS – Klasse aktiv

1#box {
2    padding: 12px;
3    border: 2px solid #1e6bd9;
4    border-radius: 8px;
5}
6
7#box.aktiv {
8    background-color: #1e6bd9;
9    color: white;
10}

JavaScript – classList.toggle()

1const box = document.getElementById("box");
2const button = document.getElementById("toggleBtn");
3
4button.addEventListener("click", function() {
5    box.classList.toggle("aktiv");
6});

Ausgabe

Box

Klasse "aktiv": aus

Ein Menü ist oft zuerst versteckt. Mit CSS zeigst du es nur, wenn die Klasse open gesetzt ist. JavaScript schaltet diese Klasse beim Klick um.

So trennst du Logik und Design: JS entscheidet nur „offen oder zu“, CSS macht die Darstellung.

HTML – Menü-Button und Liste

1<button id="menuBtn">Menü</button>
2<ul id="menu">
3    <li><a href="#">Start</a></li>
4    <li><a href="#">Kurse</a></li>
5    <li><a href="#">Kontakt</a></li>
6</ul>

CSS – Menü mit open

1#menu {
2    display: none;
3    list-style: none;
4    padding: 0;
5}
6
7#menu.open {
8    display: block;
9}

JavaScript – Menü mit toggle

1const menuBtn = document.getElementById("menuBtn");
2const menu = document.getElementById("menu");
3
4menuBtn.addEventListener("click", function() {
5    menu.classList.toggle("open");
6});

Ausgabe

Klicke auf „Menü“ – die Klasse open steuert die Sichtbarkeit.

Dark Mode umschalten

Für einen Dark Mode legst du Styles unter einer Klasse wie dark an – zum Beispiel dunkler Hintergrund und heller Text.

Beim Klick toggelst du die Klasse am body (oder am html-Element). Die ganze Seite wechselt dann das Aussehen.

HTML – Theme-Button

1<button id="themeBtn">Dark Mode umschalten</button>
2<p>Seiteninhalt</p>

CSS – Dark Mode

1body {
2    background-color: white;
3    color: #2c3e50;
4}
5
6body.dark {
7    background-color: #161b22;
8    color: #ecf0f1;
9}

JavaScript – Dark Mode

1const themeBtn = document.getElementById("themeBtn");
2
3themeBtn.addEventListener("click", function() {
4    document.body.classList.toggle("dark");
5});

Ausgabe

Helles Theme aktiv

Elemente ein- und ausblenden

Statt Elemente im DOM zu löschen, blendest du sie oft nur aus. Dafür reicht eine Klasse wie hidden mit display: none im CSS.

Mit toggle("hidden") blendest du den Inhalt ein und aus – der Inhalt bleibt im HTML erhalten.

HTML – Button und Text

1<button id="toggleText">Ein- / Ausblenden</button>
2<p id="text">Dieser Text kann ein- und ausgeblendet werden.</p>

CSS – Klasse hidden

1.hidden {
2    display: none;
3}

JavaScript – ein- und ausblenden

1const button = document.getElementById("toggleText");
2const text = document.getElementById("text");
3
4button.addEventListener("click", function() {
5    text.classList.toggle("hidden");
6});

Ausgabe

Dieser Text kann ein- und ausgeblendet werden.

Merksatz: Styles gehören ins CSS. Mit classList.add(), remove() und toggle() steuerst du nur, welche Klasse gerade aktiv ist.

Im nächsten Kapitel lernst du: Events auf mehreren Elementen