JavaScript HTML DOM - CSS ändern
HTML DOM ermöglicht es JavaScript, den Stil von HTML-Elementen zu ändern.
HTML-Stil ändern
Um den Stil eines HTML-Elements zu ändern, verwenden Sie diese Syntax:
document.getElementById(id).style.property=Neuer Stil
Das folgende Beispiel ändert den Stil eines <p>-Elements:
Beispiele
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Beispiel (example.com)</title>
</head>
<body>
<p id="p1">Hallo Welt!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>Der obige Absatz wurde durch ein Skript geändert.</p>
</body>
</html>
Selbst ausprobieren »
Verwenden von Ereignissen
Das HTML-DOM ermöglicht es uns, Code auszuführen, wenn Ereignisse ausgelöst werden.
Zum Beispiel die folgenden Ereignisse:
- Ein Element wird angeklickt.
- Die Seite ist fertig geladen.
- Ein Eingabefeld wird geändert.
- ……
In den folgenden Kapiteln erfahren Sie mehr über Ereignisse.
Dieses Beispiel ändert den Stil des HTML-Elements mit id="id1", wenn der Benutzer auf die Schaltfläche klickt:
Beispiele
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">Meine Überschrift 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
Klick mich!</button>
</body>
</html>
<html>
<body>
<h1 id="id1">Meine Überschrift 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
Klick mich!</button>
</body>
</html>
Selbst ausprobieren »
Weitere Beispiele
Sichtbarkeit
Wie man ein Element unsichtbar macht. Möchten Sie, dass das Element angezeigt wird oder verschwindet?