Modifier les propriétés CSS avec JavaScript
Objectifs
À la fin de cette vidéo, vous serez capable de :
- Modifier les styles CSS d'un élément HTML en utilisant JavaScript
- Utiliser
setTimeout
pour retarder des modifications - Comprendre la priorité des styles inline par rapport aux feuilles de style externes
Résumé
Découvrez comment changer dynamiquement une propriété CSS avec JavaScript après un délai défini.
Description
Dans ce tutoriel, nous allons voir comment modifier une propriété CSS existante en utilisant JavaScript. Vous apprendrez à utiliser la propriété style pour changer la couleur de fond d'un élément HTML. Ensuite, nous introduirons l'usage de setTimeout
pour retarder cette modification. Nous commencerons par définir une constante qui sélectionne notre élément, puis nous utiliserons la notation camel case pour attribuer un nouveau style. En appliquant la propriété backgroundColor
, nous verrons comment JavaScript peut mettre à jour les styles de manière dynamique, prenant le pas sur les déclarations CSS statiques. Nous ajouterons également une démonstration visuelle avec un délai de deux secondes pour observer le changement de couleur sans recharger la page.
Questions - réponses
backgroundColor
.
background-color
en backgroundColor
.
setTimeout
est utilisé pour retarder l'application du nouveau style CSS afin de démontrer l'effet sans recharger la page.
Si vous êtes novices, vous pourrez rentrer rapidement dans le monde du js.
Formation faite pour revenir dessus après avoir suivi une "réelle" formation sur les bases de Javascript.