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)
Anwendungsbeispiel
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;
}
});
Element.className funktioniert ähnlich wie Element.classList, mit dem man komfortabel Klassen ändern, hinzufügen oder löschen kann.
elem.className = 'klasse';
Inline-Popup
.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.
className()
ein Element selektiert.Ein solches Popup wird heute viel einfacher mit der Popover API realisiert:
Infobox/Tooltips mit PopoverWeblinks
- W3C: classname
- MDN: Element.className
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 mitdocument.getElementById('unentschlossen')
auf das div mit dieser id zugegriffen. Die Funktion weist der EigenschaftclassName
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.