Il DOM HTML consente JavaScript per cambiare lo stile di elementi HTML.
Cambiare stile HTML
Per modificare lo stile di un elemento HTML, utilizzare la seguente sintassi:
document.getElementById(id).style.property=new style
L'esempio seguente modifica lo stile di un <p> elemento:
Esempio
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>The paragraph above was changed by a script.</p>
</body>
</html>
Prova tu stesso " utilizzando Events
Il HTML DOM consente di eseguire il codice quando si verifica un evento.
Gli eventi sono generati dal browser quando "le cose accadono" per elementi HTML:
- Un elemento viene cliccato
- La pagina è stata caricata
- I campi di input vengono modificati
Si impara di più sugli eventi nel prossimo capitolo di questo tutorial.
Questo esempio viene modificato lo stile dell'elemento HTML con id="id1" , quando l'utente fa clic su un pulsante:
Esempio
<!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 tu stesso " Altri esempi
Visibilità Come rendere un elemento invisibile. Non si desidera visualizzare l'elemento o no?
HTML DOM stile di oggetto di riferimento
Per tutte le proprietà di stile HTML DOM, guarda la nostra completa Object Reference HTML DOM Style .
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 »