JavaScript-DOM-CSS


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


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>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Changing the HTML style:</p>


<p id="p1">Hello World!</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>


</body>
</html>

Verwenden von Ereignissen

Mit dem HTML-DOM können Sie Code ausführen, wenn ein Ereignis auftritt.

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.

In diesem Beispiel wird der Stil des HTML-Elements mit id="id1" geändert, wenn das Benutzer klickt auf eine Schaltfläche:

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>

Probieren Sie es selbst aus →

<!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

Sichtweite

<!DOCTYPE html>
<html>
<body>

<p id="p1">
This is a text.
This is a text.
This is a text.
This is a text.
</p>

<input type="button" value="Hide text" onclick="document.getElementById('p1').style.visibility='hidden'">
<input type="button" value="Show text" onclick="document.getElementById('p1').style.visibility='visible'">

</body>
</html>

HTML-DOM-Stil-Objektreferenz

Alle Eigenschaften des HTML-DOM-Stils finden Sie in unserem vollständigen HTML-DOM-Stil-Objektreferenz.