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.
- Changez la couleur de fond du
- Basculer une classe de surlignage : Lorsque le bouton est cliqué :
- Ajoutez ou supprimez la classe
highlight
sur le<div>
avec l'IDcard
.
- Ajoutez ou supprimez la classe
- 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.
- Ajoutez ou supprimez la classe
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 !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 2.22
Défi : Modifier les Styles des Éléments
Glissez pour afficher le menu
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.
- Changez la couleur de fond du
- Basculer une classe de surlignage : Lorsque le bouton est cliqué :
- Ajoutez ou supprimez la classe
highlight
sur le<div>
avec l'IDcard
.
- Ajoutez ou supprimez la classe
- 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.
- Ajoutez ou supprimez la classe
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 !