Contenu du cours
Maîtrise Avancée de JavaScript
Maîtrise Avancée de JavaScript
Défi : Modifier les Styles des Éléments
Tâche
Vous construisez une carte interactive qui peut changer d'apparence en fonction des actions de l'utilisateur. Les utilisateurs peuvent changer la couleur de fond de la carte, la redimensionner et basculer un état "surligné" pour un style supplémentaire.
Changer les styles en ligne : Lorsque le bouton est cliqué :
Changez la couleur de fond du
<div>
avec l'IDcard
en"lightblue"
;Définissez la largeur de la carte à
"300px"
;Ajoutez une bordure
2px solid #333
autour de la carte.
Basculer une classe de surlignage : Lorsque le bouton est cliqué :
Ajoutez ou supprimez la classe
highlight
sur le<div>
avec l'IDcard
.
Ajouter une classe de thème sombre : Lorsque le bouton est cliqué :
Ajoutez ou supprimez la classe
dark-theme
sur le<body>
, ce qui devrait changer le thème de la page.
index.html
index.css
index.js
Utilisez
style.backgroundColor
pour changer la couleur de fond du<div>
avec l'IDcard
en"lightblue"
;Utilisez
style.width
pour définir la largeur de la carte à"300px"
;Utilisez
style.border
pour ajouter une bordure2px solid #333
autour de la carte;Utilisez
classList.toggle()
pour ajouter ou supprimer la classehighlight
sur le<div>
avec l'IDcard
;Utilisez
classList.toggle()
pour ajouter ou supprimer la classedark-theme
sur le<body>
, ce qui devrait changer le thème de la page.
index.html
index.css
index.js
Merci pour vos commentaires !