Modifica CSS HTML DOM JavaScript

HTML DOM 允许 JavaScript 更改 HTML 元素的样式。

改变 HTML 样式

如需更改 HTML 元素的样式，请使用此语法：

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

下面的例子更改了 <p> 元素的样式：

Esempio

<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>Il paragrafo sopra è stato modificato dallo script.</p>
</body>
</html>

Prova da solo

Usare gli eventi

HTML DOM ti permette di eseguire codice quando si verificano eventi.

Quando "qualcosa" accade su un elemento HTML, il browser genera un evento:

  • Quando si clicca su un elemento
  • Quando la pagina viene caricata
  • Quando il campo di input viene modificato

Imparerai di più sugli eventi nel prossimo capitolo di questo tutorial.

Questo esempio cambierà lo stile dell'elemento HTML con id="id1" quando l'utente clicca sul pulsante:

Esempio

<!DOCTYPE html>
<html>
<body>
<h1 id="id1">Il mio titolo 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
Clicca su di me!
</button>
</body>
</html>

Prova da solo

Più esempi

Visibilità
Come rendere un elemento invisibile. Vuoi visualizzare l'elemento?

Manuale di riferimento dell'oggetto Style DOM HTML

Per tutti gli attributi di stile DOM HTML, visitare il nostro Manuale di riferimento dell'oggetto Style DOM HTML.