HTML DOM tillåter JavaScript att ändra stilen på HTML-element.
För att ändra stilen på ett HTML-element, använd denna syntax:
document.getElementById(id).style.property = new style
Följande exempel ändrar stilen för ett ><p>
-element:
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
</body>
</html>
Prova själv →
<!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>
HTML DOM låter dig exekvera kod när en händelse inträffar.
Händelser genereras av webbläsaren när "saker händer" med HTML-element:
Ett element klickas på
Sidan har laddats
Inmatningsfälten ändras
Du kommer att lära dig mer om händelser i nästa kapitel i denna handledning.
Det här exemplet ändrar HTML-elementets stil med id="id1"
, när användaren klickar på en knapp:
<!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>
Prova själv →
<!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>
Synlighet
<!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>
För alla HTML DOM-stilegenskaper, titta på vår kompletta HTML DOM Style Object Reference.