JavaScript/DOM/Element/className

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

  • DOM 1.0
  • JavaScript 1.5
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • Lesen, Schreiben / Read, Write

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.

[Bearbeiten] 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-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.

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';

[Bearbeiten] Inline-Popup

Beispiel ansehen …
.overlayHidden {
  display: none;
}
 
.overlay { 
  width: 20em; 
  background: #fffbf0; 
  border: 1px 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.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML