JavaScript HTML DOM - Verandering van CSS
Die HTML DOM laat JavaScript toe om die styl van HTML-elemente te verander.
Verander HTML-styl
Om die styl van 'n HTML-element te verander, gebruik hierdie sintaksis:
document.getElementById(id).style.property = new style
Die volgende voorbeeld verander die styl van 'n <p>
element:
Voorbeeld
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
</body>
</html>
Die gebruik van gebeurtenisse
Die HTML DOM laat jou toe om kode uit te voer wanneer 'n gebeurtenis plaasvind.
Gebeurtenisse word deur die blaaier gegenereer wanneer "dinge gebeur" met HTML-elemente:
- Daar word op 'n element geklik
- Die bladsy is gelaai
- Invoervelde word verander
Jy sal meer oor gebeure leer in die volgende hoofstuk van hierdie tutoriaal.
Hierdie voorbeeld verander die styl van die HTML-element met id="id1"
, wanneer die gebruiker 'n knoppie klik:
Voorbeeld
<!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>
Meer voorbeelde
Hoe om 'n element onsigbaar te maak. Wil jy die element wys of nie?
HTML DOM Style Object Verwysing
Vir alle HTML DOM-styl eienskappe, kyk na ons volledige HTML DOM Style Object Reference .