JavaScript HTML DOM - Änderungen an CSS

The HTML DOM allows JavaScript to change the style of HTML elements.

Change HTML style

To change the style of an HTML element, use this syntax:

document.getElementById(id).style.property = new style

The following example changes the <p> Element style:

Beispiel

<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>Der obige Absatz wurde durch das Skript geändert.</p>
</body>
</html>

Versuchen Sie es selbst

Ereignisse verwenden

HTML DOM ermöglicht es Ihnen, Code auszuführen, wenn Ereignisse auftreten.

Wenn "etwas" im HTML-Element passiert, erzeugt der Browser ein Ereignis:

  • Wenn ein Element geklickt wird
  • Wenn die Seite geladen wird
  • Wenn das Eingabefeld geändert wird

Sie werden im nächsten Kapitel dieses Tutorials mehr über Ereignisse lernen.

Dieser Beispielcode ändert den Stil des HTML-Elements mit id="id1", wenn der Benutzer auf den Button klickt:

Beispiel

<!DOCTYPE html>
<html>
<body>
<h1 id="id1">Meine Überschrift 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
Klicken Sie auf mich!
</button>
</body>
</html>

Versuchen Sie es selbst

Mehr Beispiele

Sichtbarkeit
Wie macht man ein Element unsichtbar. Möchten Sie das Element anzeigen?

HTML DOM Style-Objekt-Referenzhandbuch

Für alle HTML DOM-Style-Attribute besuchen Sie bitte unsere HTML DOM Style-Objekt-Referenzhandbuch.