Changement CSS avec JavaScript HTML DOM

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

改变 HTML 样式

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

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

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

Exemple

<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>Le paragraphe ci-dessus a été modifié par le script.</p>
</body>
</html>

Essayez-le vous-même

Utilisation des événements

HTML DOM vous permet d'exécuter du code lorsque des événements se produisent.

Lorsque «quelque chose» se passe sur un élément HTML, le navigateur génère un événement :

  • Lorsque vous cliquez sur un élément
  • Lorsque la page est chargée
  • Lorsque le champ d'entrée est modifié

Vous apprendrez plus sur les événements dans le prochain chapitre de ce tutoriel.

Dans cet exemple, lorsque l'utilisateur clique sur le bouton, le style de l'élément HTML avec id="id1" est modifié :

Exemple

<!DOCTYPE html>
<html>
<body>
<h1 id="id1">Mon titre 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
Cliquez sur moi !
</button>
</body>
</html>

Essayez-le vous-même

Plus d'exemples

Visibilité
Comment rendre un élément invisible. Souhaitez-vous afficher l'élément ?

Manuel de référence de l'objet Style DOM HTML

Pour tous les attributs de style DOM HTML, veuillez visiter notre Manuel de référence de l'objet Style DOM HTML.