JavaScript/DOM/Element/className

Die Eigenschaft Element.className ändert oder speichert die Klasse, zu der ein Element gehört.

Syntax

var name = elementNodeReference.className;

elementNodeReference.className = name;

• name: Klassenname (als Zeichenkette)

Empfehlung: Mit Element.classList, welches inzwischen von allen relevanten Browsern unterstützt wird, können Sie wesentlich feiner agieren, da dieses Objekt mit mehreren Klassennamen umgehen kann.

Anwendungsbeispiel

Beispiel ansehen …

  
document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('main').addEventListener('click', ändereKlasse);
  
  function ändereKlasse(event) {
    var button = event.target,
    name = button.getAttribute('data-attribut'),
    elem = document.getElementById('unentschlossen');
    elem.className = name;
  }
  
});

Das DOMContentLoaded-Ereignis ruft eine anonyme Funktion auf, in der ein Eventhandler an das main-Element gehängt wird. Wenn dies angeklickt wird, wird die Funktion ändereKlasse() aufgerufen.

Dort wird mit Event.target ermittelt, welcher der Buttons angeklickt wurde. Mit getAttribute wird das entsprechende data-Attribute|data-Attribut ausgelesen.

Jetzt wird mit document.getElementById('unentschlossen') auf das div mit dieser id zugegriffen. Die Funktion weist der Eigenschaft className den jeweils übergebenen Wert zu. Dadurch wird die Klasse und damit auch die Darstellung dynamisch geändert.
Dabei übernimmt das div auch dynamisch alle Stylesheet-Eigenschaften der neuen Klasse.

ansehen …

Element.className funktioniert ähnlich wie Element.classList, 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. Wenn Sie die Klasse direkt ändern, müssen Sie sie in Anführungszeichen notieren:

elem.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';
  }

ansehen …

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 Demonstation, 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

Weblinks

• W3C: classname
• MDN: Element.className