JavaScript HTML DOM - Verander CSS

HTML DOM staat JavaScript toe om de stijl van HTML-elementen te wijzigen.

Wijzig HTML-stijl

Gebruik deze syntaxis om de stijl van een HTML-element te wijzigen:

document.getElementById(id).style.eigenschap = nieuwe stijl

De volgende voorbeeld wijzigt de <p> Elementenstijl:

Voorbeeld

<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>De bovenstaande alinea is veranderd door het script.</p>
</body>
</html>

Probeer het zelf

Gebruik van evenementen

HTML DOM laat je toe om code uit te voeren wanneer een evenement optreedt.

Wanneer 'iets' gebeurt met een HTML-element, genereert de browser een evenement:

  • Wanneer een element wordt geklikt
  • Wanneer de pagina wordt geladen
  • Wanneer een invoerveld wordt gewijzigd

Je zal in het volgende hoofdstuk van deze handleiding meer over evenementen leren.

Deze voorbeeld verandert de stijl van het HTML-element met id="id1" wanneer de gebruiker op de knop klikt:

Voorbeeld

<!DOCTYPE html>
<html>
<body>
<h1 id="id1">Mijn titel 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
Klik op mij!
</button>
</body>
</html>

Probeer het zelf

Meer voorbeelden

Zichtbaarheid
Hoe een element onzichtbaar te maken. Wil je het element weergeven?

HTML DOM Style Object Referentiehandleiding

Voor alle HTML DOM stijl eigenschappen, bezoek onze HTML DOM Style Object Referentiehandleiding.