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
setTimeoutpour 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.
Programme détaillé
Module 1 - Introduction
Module 2 - Apprendre à coder
Module 3 - Concepts avancés
Module 4 - Travailler avec le JavaScript
Module 5 - JavaScript ES6
Module 6 - Le JavaScript est asynchrone
Module 7 - Utiliser JavaScript dans une page web - Partie 1
Module 8 - Utiliser JavaScript dans une page web - Partie 2
Module 9 - Travaux pratiques
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.