classList

Mit classList stehen uns drei Möglichkeiten zur Verfügung:

Rückgabe der Klassen eines Elements: Element.classList
Zuweisung einer neuen Klasse an ein Element: Element.classList.add('newClass')
Entfernen einer bestehenden Klasse eines Elements: Element.classList.remove('oldClass')

Mit classList.add und classList.remove() wird die Klassenliste des Elements im DOM dynamisch angepasst.

Aber sehen wir uns das Beispiel genauer an.

Kopiert Euch gerne den Code und probiert es aus: Code

Beispiel

Beobachte meine Textfarbe
nach dem Wechsel der Klassen

Ausgabe der Klassen:

Ausgabe der Klassen
Klasse "newClass" hinzufügen
Klasse "newClass" entfernen

Code


HTML:

<div class="example">
	<span class="headline">Beispiel</span>
	<br>
	<br>
	<div id="clexample" class="oldClass red">
		Beobachte meine Textfarbe
		<br>
		nach dem Wechsel der Klassen
	</div>
	<br>
	<p>
		<div class="center">Ausgabe der Klassen:</div>
		<div id="target"></div>
		<br>
		<a href="javascript:showClass()">Ausgabe der Klassen</a><br>
		<a href="javascript:setClasse()">Klasse "newClass" hinzufügen</a><br>
		<a href="javascript:delClasse()">Klasse "newClass" entfernen</a><br>
	</p>
</div>



CSS:

#target {
    width: 80%;
    height: auto;
	min-height: 15px;
    margin: 5px auto;
    border: 1px solid white;
    text-align: center;
	color:rgba(112, 175, 4, 1) !important;
	padding:10px;
}

.center {
    text-align: center;
}

.oldClass{
	border:1px solid white;
	padding:10px;
}

.red{
	color:red !important;
}

.newClass{
	color:rgba(112, 175, 4, 1) !important;
}



JavaScript:

// Ausgabe der Klasennamen
function showClass(){
	let clelement = document.querySelector('#clexample');
	let clList = clelement.classList;
	let ausgabe = 'ClassList:<br>'+clList+'<br>' ;
	let target = document.querySelector('#target');
	target.innerHTML = ausgabe;
}

// Setzen der Klase newClass
function setClasse(){
	let clelement = document.querySelector('#clexample');
	let clList = clelement.classList.add('newClass');
	showClass();
}

// Entfernen der Klase newClass
function delClasse(){
	let clelement = document.querySelector('#clexample');
	let clList = clelement.classList.remove('newClass');
	showClass();
}