Beispiel:JS-document-getElementById.html
Aus SELFHTML-Wiki
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>Document.getElementById()</title>
<style>
div {
padding: 1em;
margin: 2em auto;
width: 20em;
height: 10em;
background: #f1f3f4;
}
.hinweis {
border-left: 5px solid #c32e04;
}
.hinweis h2:before {
color: #c32e04;
content:'Beachten: ';
}
.empfehlung {
border-left: 5px solid #5a9900;
}
.empfehlung h2:before {
color: #5a9900;
content:'Empfehlung: ';
}
.aside {
float: right;
border-left: 5px solid #3983ab;
background: #fffbf0 ;
}
.aside h2:before {
color: #3983ab;
content:'weiterführende Links: ';
}
</style>
<script>
'use strict';
document.addEventListener('DOMContentLoaded', function () {
const unentschlossenesElement = document.getElementById('unentschlossen');
document.getElementById('main')
.addEventListener('click', aktualisiereAussehen);
function aktualisiereAussehen(event) {
const geklickterButton = event.target,
aussehenKlasse = geklickterButton.dataset.aussehen;
unentschlossenesElement.className = aussehenKlasse;
}
});
</script>
</head>
<body>
<h1>Document.getElementById()</h1>
<main id="main">
<h2>Wie soll ich aussehen?</h2>
<button data-aussehen="hinweis">Hinweis</button>
<button data-aussehen="empfehlung">Empfehlung</button>
<button data-aussehen="aside">noch mal anders</button>
<div>
<h2>Überschrift</h2>
<p>Dieser div-Container ist wie alle anderen.</p>
</div>
<div id="unentschlossen">
<h2>Überschrift</h2>
<p>Dieser div-Container wird individuell gestaltet.</p>
</div>
<div>
<h2>Überschrift</h2>
<p>Dieser div-Container ist wie alle anderen.</p>
</div>
</main>
</body>
</html>
