Le code HTML DOM permet JavaScript pour modifier le style des éléments HTML.
Changement de style HTML
Pour modifier 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>
<p>The paragraph above was changed by a script.</p>
</body>
</html>
Essayez - le vous - même » Utilisation des Events
Le code HTML DOM 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 «les choses» aux éléments HTML:
- Un élément est cliqué sur
- La page a chargé
- Les champs d'entrée sont modifiés
Vous en apprendrez plus sur les événements dans le prochain chapitre de ce tutoriel.
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> Essayez - le vous - même » Autres exemples
Visibilité Comment faire un élément invisible. Voulez-vous montrer l'élément ou non?
HTML DOM style Object Reference
Pour toutes les propriétés de style HTML DOM, consultez notre complète HTML DOM style Object Reference .
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 »