Introduction
Apprendre à coder
Concepts avancés
Travailler avec le JavaScript
JavaScript ES6
Le JavaScript est asynchrone
Utiliser JavaScript dans une page web - Partie 1
Utiliser JavaScript dans une page web - Partie 2
Détails de la leçon
Description de la leçon
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.
Objectifs de cette leçon
À 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
Prérequis pour cette leçon
Pour suivre ce tutoriel, vous devez connaître les bases du HTML, du CSS et avoir une première approche de JavaScript.
Métiers concernés
Les compétences acquises dans ce tutoriel sont pertinentes pour les métiers de développeur web, intégrateur web et front-end developer.
Alternatives et ressources
Pour des tâches similaires, vous pouvez également utiliser des bibliothèques JavaScript comme jQuery pour simplifier la manipulation du DOM et des styles CSS.
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.
Je m'abonne