JürgenB: Button zum Hinzufügen von Klassen

Beitrag lesen

Hallo Marc,

hier mal mein Entwurf:

<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<style type="text/css">
		
			html, body { min-height: 100vh }
		
			.toggleClass { background-color: red }

		</style>
		
		<script>
		
			// Eventhandler auf "Dom fertig"
			window.addEventListener("DOMContentLoaded",function() { 
				// Button suchen und Eventhandler auf button-click
				document.querySelector("#toggleClassBody").addEventListener("click", function() {
					// Klasse umschalten
					document.body.classList.toggle("toggleClass"); 
				}, false);
			}, false);
		
		</script>

	</head>

	<body>

		<button id="toggleClassBody" type="button">Toggle Klasse "toggleClass" beim body.</button>
	
	</body>
</html>

Ich schalte mit document.body.classList.toggle("toggleClass"); die Klasse toggleClass am body an bzw. aus. Von da aus kannst du dann mit den css-Selectoren ja jedes weitere Element beeinflussen.

Gruß
Jürgen