JavaScript HTML DOM - Modification du CSS
Le DOM HTML permet à JavaScript de modifier le style des éléments HTML.
Modification du style HTML
Pour changer le style d'un élément HTML, utilisez cette syntaxe :
document.getElementById(id).style.property = new style
L'exemple suivant modifie le style d'un <p>élément :
Exemple
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
</body>
</html>
Utilisation des événements
Le DOM HTML vous permet d'exécuter du code lorsqu'un événement se produit.
Les événements sont générés par le navigateur lorsque "des choses arrivent" aux éléments HTML :
- Un élément est cliqué
- La page est chargée
- Les champs de saisie sont modifiés
Vous en apprendrez plus sur les événements dans le prochain chapitre de ce didacticiel.
Cet exemple modifie le style de l'élément HTML avec id="id1", lorsque l'utilisateur clique sur un bouton :
Exemple
<!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>
Plus d'exemples
Comment rendre un élément invisible. Voulez-vous afficher l'élément ou non ?
Référence d'objet de style HTML DOM
Pour toutes les propriétés de style HTML DOM, consultez notre référence complète sur les objets de style HTML DOM .