Apprenez à modifier dynamiquement les styles CSS avec JavaScript

Modifier et animer un élément du DOM
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre JavaScript ES6 - Les fondamentaux
Revoir le teaser Je m'abonne
3,5
Transcription

69,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
3,5
69,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

À 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

Découvrez comment changer dynamiquement une propriété CSS avec JavaScript après un délai défini.

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.

Voir plus
Questions réponses
Quelle propriété CSS est modifiée dans ce tutoriel ?
La propriété CSS modifiée dans ce tutoriel est backgroundColor.
Comment JavaScript gère-t-il les noms de propriétés CSS contenant des tirets?
JavaScript utilise la notation camel case pour les noms de propriétés CSS contenant des tirets, transformant par exemple background-color en backgroundColor.
Pourquoi utiliser <code>setTimeout</code> dans ce contexte ?
setTimeout est utilisé pour retarder l'application du nouveau style CSS afin de démontrer l'effet sans recharger la page.

Programme détaillé

8 commentaires
3,5
8 votes
5
4
3
2
1
C0C23DAC-E0F0-4671-A5DA-98CC3C3F0FD7@cyberlibris.studi.fr
Il y a 3 months
Commentaire
RAS
elephorm-1344761@addviseo.com
Il y a 6 months
Commentaire
Le cours sont pas assez adaptés pour une personne qui débute un peu les langages informatiques
85F76F55-E9A7-4111-B6B2-79CB51A205B9@cyberlibris.studi.fr
Il y a 10 months
Commentaire
EXCELLENT
93DAC8BB-E168-4366-B5BE-6F3D0B39B74D@cyberlibris.studi.fr
Il y a 1 year
Commentaire
super
wastiaux.william
Il y a 3 years
Commentaire
Un peu léger, le cour survole toutes les notions de bases. L'idéal est de visionner les cours en x2.
Si vous êtes novices, vous pourrez rentrer rapidement dans le monde du js.
michaellaunay
Il y a 3 years
Commentaire
Bonne formation pour qui sait déjà programmer dans un autre langage. Une formation sur Javascript avancé serait fort appréciée ;-)
olivierousmail
Il y a 3 years
Commentaire
Formation inadaptée pour un débutant, donne des concepts sans les expliquer, qu'est ce qu'un tableau ? qu'est ce qu'une fonction ? focalise tout le premier module sur l'utilisation de constantes alors qu'on est loin de les utiliser régulièrement.

Formation faite pour revenir dessus après avoir suivi une "réelle" formation sur les bases de Javascript.
lepajollecfranck
Il y a 3 years
Commentaire
Très bons contenus et bonnes explications. Manque d'un second module pour aller plus loin dans l'exemple.