JavaScript DOM CSS

Indholdsfortegnelse

    Vis indholdsfortegnelse

HTML DOM tillader JavaScript at ændre stilen på HTML-elementer.

Ændring af HTML-stil

For at ændre stilen på et HTML-element skal du bruge denne syntaks:

document.getElementById(id).style.property = new style

Følgende eksempel ændrer stilen for et ><p>-element:

Eksempel

<html>
<body>

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
</script>

</body>
</html>

Prøv det selv →

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

Brug af begivenheder

HTML DOM giver dig mulighed for at udføre kode, når en hændelse opstår.

Hændelser genereres af browseren, når "ting sker" med HTML-elementer:

  • Der klikkes på et element

  • Siden er indlæst

  • Indtastningsfelter ændres

Du vil lære mere om begivenheder i næste kapitel af denne øvelse.

Dette eksempel ændrer HTML-elementets stil med id="id1", når bruger klikker på en knap:

Eksempel

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

Prøv det selv →

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

Flere eksempler

Sigtbarhed

<!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 Style Object Reference

For alle HTML DOM-stilegenskaber, se vores komplette HTML DOM Style Object Reference.