Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Modification des Styles d’Éléments avec JavaScript | Manipulation du DOM pour le Développement Web Interactif
Maîtrise Avancée de JavaScript

bookModification des Styles d’Éléments avec JavaScript

En développement web, il est souvent nécessaire de modifier dynamiquement les styles des éléments. JavaScript offre deux méthodes principales pour changer l'apparence des éléments : la modification des styles en ligne à l'aide de la propriété style et la gestion des classes avec classList.

Modification des styles en ligne avec la propriété style

La propriété style en JavaScript permet de modifier directement le CSS en ligne d'un élément HTML. Cette méthode offre un contrôle total sur chaque propriété CSS individuelle, mais elle se limite aux styles en ligne et n'affecte que l'élément spécifique.

Il est possible de modifier les propriétés CSS individuelles en utilisant la notation par point sur l'objet style d'un élément. Les noms des propriétés sont écrits en camelCase (par exemple, backgroundColor au lieu de background-color).

index.html

index.html

index.css

index.css

index.js

index.js

copy

La propriété style est utilisée pour modifier les styles en ligne de l’élément #box. Chaque propriété CSS est accessible comme une propriété JavaScript individuelle (par exemple, box.style.backgroundColor), ce qui permet de modifier dynamiquement des aspects spécifiques du style de l’élément.

Ajout et suppression de classes CSS avec classList

La propriété classList offre une méthode plus flexible et puissante pour gérer les styles d’un élément en ajoutant, supprimant ou basculant des classes CSS. Cette méthode est plus facile à maintenir que la modification directe des styles en ligne, car elle permet de profiter des fichiers CSS externes et de séparer la mise en forme de la logique JavaScript.

index.html

index.html

index.css

index.css

index.js

index.js

copy

classList.toggle() est utilisé pour ajouter ou retirer la classe highlight lors du clic sur le bouton. Cette méthode permet d'éviter de surcharger l'attribut style en ligne et s'appuie sur des règles CSS prédéfinies pour une meilleure maintenabilité.

Exemple pratique : Changement de thèmes

Considérer un exemple pratique où l'utilisateur peut basculer entre un thème clair et un thème sombre en utilisant classList.

index.html

index.html

index.css

index.css

index.js

index.js

copy

classList.replace() est utilisé pour échanger les classes light-theme et dark-theme en fonction de l'état actuel.

1. Quelle propriété est utilisée pour modifier les styles en ligne d’un élément ?

2. Comment changer la couleur d’arrière-plan d’une <div> avec l’ID box en corail à l’aide de JavaScript ?

3. Que fait le code suivant ?

question mark

Quelle propriété est utilisée pour modifier les styles en ligne d’un élément ?

Select the correct answer

question mark

Comment changer la couleur d’arrière-plan d’une <div> avec l’ID box en corail à l’aide de JavaScript ?

Select the correct answer

question mark

Que fait le code suivant ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 12

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Suggested prompts:

Can you show me an example of how to use the style property in JavaScript?

How do I use classList to switch between themes?

What are the advantages of using classList over inline styles?

Awesome!

Completion rate improved to 2.22

bookModification des Styles d’Éléments avec JavaScript

Glissez pour afficher le menu

En développement web, il est souvent nécessaire de modifier dynamiquement les styles des éléments. JavaScript offre deux méthodes principales pour changer l'apparence des éléments : la modification des styles en ligne à l'aide de la propriété style et la gestion des classes avec classList.

Modification des styles en ligne avec la propriété style

La propriété style en JavaScript permet de modifier directement le CSS en ligne d'un élément HTML. Cette méthode offre un contrôle total sur chaque propriété CSS individuelle, mais elle se limite aux styles en ligne et n'affecte que l'élément spécifique.

Il est possible de modifier les propriétés CSS individuelles en utilisant la notation par point sur l'objet style d'un élément. Les noms des propriétés sont écrits en camelCase (par exemple, backgroundColor au lieu de background-color).

index.html

index.html

index.css

index.css

index.js

index.js

copy

La propriété style est utilisée pour modifier les styles en ligne de l’élément #box. Chaque propriété CSS est accessible comme une propriété JavaScript individuelle (par exemple, box.style.backgroundColor), ce qui permet de modifier dynamiquement des aspects spécifiques du style de l’élément.

Ajout et suppression de classes CSS avec classList

La propriété classList offre une méthode plus flexible et puissante pour gérer les styles d’un élément en ajoutant, supprimant ou basculant des classes CSS. Cette méthode est plus facile à maintenir que la modification directe des styles en ligne, car elle permet de profiter des fichiers CSS externes et de séparer la mise en forme de la logique JavaScript.

index.html

index.html

index.css

index.css

index.js

index.js

copy

classList.toggle() est utilisé pour ajouter ou retirer la classe highlight lors du clic sur le bouton. Cette méthode permet d'éviter de surcharger l'attribut style en ligne et s'appuie sur des règles CSS prédéfinies pour une meilleure maintenabilité.

Exemple pratique : Changement de thèmes

Considérer un exemple pratique où l'utilisateur peut basculer entre un thème clair et un thème sombre en utilisant classList.

index.html

index.html

index.css

index.css

index.js

index.js

copy

classList.replace() est utilisé pour échanger les classes light-theme et dark-theme en fonction de l'état actuel.

1. Quelle propriété est utilisée pour modifier les styles en ligne d’un élément ?

2. Comment changer la couleur d’arrière-plan d’une <div> avec l’ID box en corail à l’aide de JavaScript ?

3. Que fait le code suivant ?

question mark

Quelle propriété est utilisée pour modifier les styles en ligne d’un élément ?

Select the correct answer

question mark

Comment changer la couleur d’arrière-plan d’une <div> avec l’ID box en corail à l’aide de JavaScript ?

Select the correct answer

question mark

Que fait le code suivant ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 12
some-alt