//-------------------- 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();
}