JavaScript/DOM/Element/className

Die Eigenschaft Element.className ändert oder speichert die Klassen, die einem Element zugeordnet sind. Sie enthält eine Zeichenkette, die aus den durch Leerzeichen getrennten Klassennamen besteht. Der Inhalt dieser Eigenschaft ist ein Abbild des HTML-Attributs class, heißt aber anders, weil class in JavaScript ein reserviertes Wort ist.

Syntax

var klassen = element.className;

element.className = klassen;

• klassen: Eine Zeichenkette mit einem Klassennamen oder mehreren, durch Leerstellen getrennten Klassennamen.

Empfehlung: Das Element.classList, welches inzwischen von allen Browsern unterstützt wird, stellt die Klassen nicht als Zeichenkette, sondern als DOMTokenList-Objekt dar und erlaubt, gerade wenn mehrere Klassen zugeordnet sind, eine wesentlich bequemere Manipulation der Klassen eines Elements.

Anwendungsbeispiel

Beispiel ansehen …

  
document.getElementById('main')
        .addEventListener('click', ändereKlasse);
  
const undecided = document.getElementById('unentschlossen');
    
function ändereKlasse(event) {
   const button = event.target;
   if (button.dataset.hasOwnProperty("klasse"))
      undecided.className = button.dataset.klasse;
   else
      undecided.className = '';
}

Das Beispiel registriert auf dem Element mit id="main" einen click-Eventhandler. Die click-Events, die von Buttons innerhalb des main-Elements ausgelöst werden, können so mit einer Registrierung vearbeitet werden (Bubbling). Als Eventhandler wird die Funktion ändereKlasse verwendet.

Das Element, für das wir Änderungen vornehmen wollen, wird über die id unentschlossen vorab ermittelt und in der Variablen undecided gespeichert.

Bei jedem click-Event wird nun über die Eigenschaft Event.target ermittelt, welches Element den Klick ausgelöst hat. Das können Buttons sein, aber auch andere Elemente. Das könnte man über event.tagName=="BUTTON" noch weiter eingrenzen, hier beschränken wir uns darauf, festzustellen, ob das geklickte Element ein Attribut namens data-klasse besitzt. Dazu verwenden wir die dataset-Eigenschaft, die alle data-Attribute eines Elements zusammenfasst. Besitzt das dort gespeicherte DOMStringMap-Objekt die Eigenschaft klasse, so war ein data-klasse-Attribut vorhanden.

Der Wert dieses Attributs wird dann der className-Eigenschaft des "unentschlossen" Elements zugewiesen, wodurch es dieser Klasse zugeordnet wird, die dafür festgelegten CSS-Regeln wirksam werden die darin notierten Eigenschaften für das Element gültig werden. Dies geschieht vollautomatisch, ohne weiteres Zutun.
Fehlt die Klasse, wird className auf den Leerstring gesetzt. Damit werden alle Klassenzuordnungen entfernt und das "unentschlossen"-Element bekommt wieder sein normales Aussehen. Das merken Sie beim Ausprobieren, wenn Sie auf der Seite woandershin klicken als auf einen der Buttons.

className ist eine Eigenschaft aus der Zeit, als das DOM gerade entstand und war so lange relevant, wie man noch mit einem Internet Explorer 10 rechnen musste. Das ist längst nicht mehr der Fall. Sie sollten deshalb grundsätzlich die classList-Eigenschaft verwenden, die die Klassen in Form eines DOMTokenList-Objekts zur Verfügung stellt, mit dem man komfortabel Klassen ändern, hinzufügen oder löschen kann.

Beachten Sie: Im Beispiel wird für die Klasse(n) eine Variable verwendet. Sie können natürlich auch einen festen Wert als Klasse festlegen, indem Sie an Stelle einer Variablen eine Zeichenkettenkonstante notieren:

element.className = 'klasse';

Inline-Popup

Beispiel ansehen …

.overlayHidden {
  display: none;
}
 
.overlay { 
  width: 20em; 
  background: #fffbf0; 
  border: thin solid #e7c157;
  position: absolute;
  top: 10%;
  right: 30%;
  margin: auto;
  padding: 1em;
}

  
  var startBtn = document.getElementById('start'),
      AnmeldungBtn = document.getElementById('anmeldung'),
      SchließenBtn = document.getElementById('schließen');
      popup = document.getElementById('popup');
   
  startBtn.addEventListener('click',zeigeFenster);
  AnmeldungBtn.addEventListener('click',schließeFenster);
  SchließenBtn.addEventListener('click',schließeFenster);
 
 
  function zeigeFenster() { 
      popup.className = 'overlay';
  }
 
  function schließeFenster(){
      popup.className = 'overlayHidden';
  }

Im Beispiel wird eine modale Dialog-Box als div eingefügt. Sie hat normal die Klasse overlayHidden. Durch einen Klick auf den Start-Button wird die Funktion zeigeFenster() aufgerufen.

Mit className wird die vorhandene Klasse entfernt und die Klasse overlay hinzugefügt.

Der absolut positionierte Schließen-Button, bzw. der Anmelde-Button rufen schließeFenster() auf, hier werden die Klassen wieder getauscht.

Alternativ könnten Sie den Overlay über die ganze Seite erstrecken lassen, die dann ausgegraut würde. Der eigentliche modale Dialog wäre dann in einem Kindelement an der gewünschten Position.

Beachten Sie: Dieses Beispiel dient nur der Demonstration, wie Sie mit einem Klick auf einen Button ein Script ausführen, das dann mit className() ein Element selektiert.

Ein solches Popup wird heute viel einfacher mit der Popover API realisiert:

Infobox/Tooltips mit Popover

Siehe auch

• HTML/Attribute/class
• JavaScript und CSS
  • CSS-Eigenschaften setzen
    • Stylesheet-Regeln auf ein Element anwenden
    • Schalterklasse für viele Elemente

Weblinks

• W3C: classname
• MDN: Element.className