toggle()

Unter classList habe ich Euch gezeigt, wie Ihr Klassen hinzufügt oder auch löscht.
Das Ganze wird aber durch die Methode toggle() ein bisschen leichter.
Wollt Ihr eine zweite Klasse durch eine Aktion wie z.B. click hinzufügen und mit dem zweiten click wieder entfernen, dann sollte toggle() zum Einsatz kommen.
document.element.classList.toggle('newClass')

Doch lasst uns das Beispiel ansehen.

Kopiert Euch gerne den Code und probiert es aus: Code

HTML:

<div id="myDiv">
	Beobachte mich.
</div>
<br>
<a href="javascript:myToggle();">Toggle</a>.



CSS:

.newClass{
	background-color:rgba(112, 175, 4, 1);
	obacity:0.5;
	border:1px solid white;
	text-align:center;
}



JavaScript:

function myToggle(){
	document.getElementById( ' myDiv ' ).classList.toggle( ' newClass ' );
}