JavaScript HTML DOM - CSS ändern
Das HTML-DOM ermöglicht es JavaScript, den Stil von HTML-Elementen zu ändern.
Ändern des HTML-Stils
Um den Stil eines HTML-Elements zu ändern, verwenden Sie diese Syntax:
document.getElementById(id).style.property = new style
Das folgende Beispiel ändert den Stil eines <p>Elements:
Beispiel
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
</body>
</html>
Verwenden von Ereignissen
Mit dem HTML-DOM können Sie Code ausführen, wenn ein Ereignis eintritt.
Ereignisse werden vom Browser generiert, wenn mit HTML-Elementen „etwas passiert“:
- Ein Element wird angeklickt
- Die Seite wurde geladen
- Eingabefelder werden geändert
Im nächsten Kapitel dieses Tutorials erfahren Sie mehr über Ereignisse.
Dieses Beispiel ändert den Stil des HTML-Elements mit id="id1", wenn der Benutzer auf eine Schaltfläche klickt:
Beispiel
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
</body>
</html>
Mehr Beispiele
Wie man ein Element unsichtbar macht. Möchten Sie das Element anzeigen oder nicht?
Objektreferenz im HTML-DOM-Stil
Sehen Sie sich für alle HTML-DOM-Stileigenschaften unsere vollständige HTML-DOM-Stilobjektreferenz an .