Element.className — Eigenschaft · JavaScript-Referenz

Signatur

Element.className

Beschreibung

Die Eigenschaft className spiegelt das Inhaltsattribut class eines Elements wider. Beim Lesen erhältst du den vollständigen Attributwert als String, z. B. "btn btn-primary active". Beim Schreiben wird das komplette class-Attribut durch den neuen Wert ersetzt.

Der Name lautet className statt class, weil class in JavaScript ein reserviertes Wort ist. Fehlt das Attribut, liefert className einen leeren String "".

Nimm className, wenn du alle Klassen auf einmal setzen, zurücksetzen oder als Ganzes auslesen willst, etwa beim Serialisieren oder beim Übernehmen der Klassen eines anderen Elements. Für einzelne Klassen (hinzufügen, entfernen, umschalten, prüfen) ist Element.classList fast immer die bessere Wahl, weil du dann keine Strings von Hand zerlegen musst.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des class-Attributs als durch Leerzeichen getrennter String. Fehlt das Attribut, ist der Wert "". Beim Zuweisen wird der Wert in einen String umgewandelt und als neues class-Attribut gesetzt.

Beispiele

Klassen auslesen und komplett ersetzen

const button = document.createElement('button');
button.className = 'btn btn-primary';
console.log(button.className);

// Überschreibt ALLE vorhandenen Klassen
button.className = 'btn btn-danger';
console.log(button.outerHTML);

btn btn-primary <button class="btn btn-danger"></button>

Prüfen, ob eine Klasse vorhanden ist (sicher per split)

const el = document.createElement('div');
el.className = 'card card-highlighted';

// Falsch: 'card'.includes würde auch bei 'card-highlighted' treffen
const hasClass = (element, name) =>
  element.className.split(/\s+/).includes(name);

console.log(hasClass(el, 'card'));
console.log(hasClass(el, 'highlighted'));
// Moderne Alternative:
console.log(el.classList.contains('card'));

true false true

Status-Klassen aus einem Objekt zusammensetzen

const buildClassName = (base, flags) =>
  [base, ...Object.entries(flags)
    .filter(([, active]) => active)
    .map(([name]) => name)]
  .join(' ');

const input = document.createElement('input');
const state = { 'is-invalid': true, 'is-disabled': false, 'is-focused': true };

input.className = buildClassName('form-control', state);
console.log(input.className);

form-control is-invalid is-focused

Alle Klassen entfernen und Klassen kopieren

const source = document.createElement('p');
source.className = 'text-muted small';

const target = document.createElement('p');
target.className = source.className; // Klassen übernehmen
console.log(target.className);

target.className = ''; // alle Klassen entfernen
console.log(JSON.stringify(target.className), target.hasAttribute('class'));

text-muted small "" true

// Wichtig · Fallstricke

Überschreiben statt Ergänzen: el.className = 'neu' löscht alle bisherigen Klassen. Zum Ergänzen nimmst du el.classList.add('neu'). Ein el.className += ' neu' funktioniert zwar, erzeugt aber leicht doppelte Klassen oder überflüssige Leerzeichen.
Teilstring-Falle: el.className.includes('active') trifft auch bei inactive zu. Prüfe deshalb mit classList.contains() oder zerlege den String per split(/\s+/).
SVG-Elemente: Bei SVG-Elementen (SVGElement) ist className kein String, sondern ein SVGAnimatedString. Den Wert erreichst du dort über el.className.baseVal. Für Code, der mit HTML und SVG gleichermaßen funktionieren soll, sind getAttribute('class') oder classList sicherer.
Leerer String: el.className = '' lässt ein leeres class=""-Attribut stehen. Soll das Attribut ganz verschwinden, nimm el.removeAttribute('class').
Typumwandlung: Zugewiesene Werte werden in Strings umgewandelt. el.className = null ergibt deshalb die Klasse "null".
Performance: Jede Zuweisung kann eine Neuberechnung der Stile auslösen. Viele Änderungen fasst du am besten zu einer einzigen Zuweisung zusammen.
Die Eigenschaft wird von allen Browsern unterstützt, auch von sehr alten.

Siehe auch

Element.classList Element.getAttribute() Element.setAttribute() Element.removeAttribute() Element.id DOMTokenList ElementInternals.ariaLive