JavaScript HTML DOM - Modifica CSS
Il DOM HTML consente a JavaScript di modificare lo stile degli elementi HTML.
Modifica dello stile HTML
Per modificare lo stile di un elemento HTML, utilizzare questa 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>
</body>
</html>
Utilizzo degli eventi
Il DOM HTML consente di eseguire codice quando si verifica un evento.
Gli eventi sono generati dal browser quando "accadono cose" agli elementi HTML:
- Viene cliccato un elemento
- La pagina è stata caricata
- I campi di input vengono modificati
Imparerai di più sugli eventi nel prossimo capitolo di questo tutorial.
Questo esempio cambia 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>
Altri esempi
Come rendere invisibile un elemento. Vuoi mostrare l'elemento o no?
Riferimento a oggetti in stile DOM HTML
Per tutte le proprietà di stile HTML DOM, guarda il nostro riferimento completo agli oggetti in stile DOM HTML .