JavaScript HTML DOM - ändra CSS

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> Elements style:

Exempel

<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>Översta stycket har ändrats av skriptet.</p>
</body>
</html>

Prova själv

Använd händelser

HTML DOM låter dig köra kod när händelser inträffar.

När "vissa saker" händer på ett HTML-element genererar webbläsaren händelser:

  • När en element klickas
  • När sidan laddas
  • När ett inmatningsfält ändras

Du kommer att lära dig mer om händelser i nästa kapitel av denna handledning.

Detta exempel kommer att ändra stilen på HTML-elementet med id="id1" när användaren klickar på knappen:

Exempel

<!DOCTYPE html>
<html>
<body>
<h1 id="id1">Min rubrik 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
Klicka mig!
</button>
</body>
</html>

Prova själv

Mer exempel

Synlighet
Hur gör man ett element osynligt. Vill du visa elementet?

HTML DOM Style-objektets referenshandbok

För alla HTML DOM-stilattribut, besök vår HTML DOM Style-objektets referenshandbok.