Vidéo: Change Background Color On Click - HTML CSS and Javascript 2025
Tout comme vous pouvez utiliser JavaScript pour modifier le code HTML d'une page Web, vous pouvez également l'utiliser pour modifier les styles CSS. Le processus est très similaire.
La première étape consiste à sélectionner l'élément que vous souhaitez appliquer ou à changer de style. Par exemple, pour sélectionner l'œil gauche d'un robot, vous pouvez utiliser le code suivant:
document. getElementById ("lefteye")
Après avoir sélectionné un élément, vous pouvez changer son style en attachant la propriété style au sélecteur, suivi du style que vous voulez changer. Pour changer la couleur de l'oeil gauche, vous pouvez utiliser ce JavaScript:
document. getElementById ("lefteye"). style. backgroundColor = "violet";
Remarquez-vous quelque chose d'étrange à propos de ce code? Lorsque vous modifiez des styles avec JavaScript, il existe deux règles:
-
Lorsque la propriété CSS ne contient qu'un seul mot, par exemple margin ou border, vous pouvez utiliser le même nom CSS pour modifier le style en JavaScript.
-
Si la propriété CSS comporte des tirets (-), le nom de la propriété CSS est converti en camelCase. Ainsi, background-color est changé en backgroundColor.
Voici quelques exemples de propriétés CSS, et comment chaque propriété est épelée en JavaScript:
| Propriété CSS | Propriété JavaScript Style |
|---|---|
| couleur d'arrière-plan | backgroundColor |
| border-radius | borderRadius |
| font-family | fontFamily |
| marge | marge |
| font-size | fontSize |
| largeur de bordure | borderWidth |
| text- align | textAlign |
| couleur | couleur |
JavaScript se soucie beaucoup de la capitalisation. Les majuscules dans les propriétés de style JavaScript doivent être présentes pour que les propriétés fonctionnent.
