Style et CSS avec le DOM

JavaScript peut modifier l’apparence d’une page web avec le DOM.

Grâce au DOM, JavaScript peut :

• Changer des couleurs
• Modifier des tailles
• Ajouter des classes CSS
• Afficher ou cacher des éléments
• Créer des interfaces dynamiques

Cette technique est très utilisée dans les applications web modernes.

1. La propriété style

Chaque élément du DOM possède une propriété style.

const box = document.querySelector(".box");

box.style.backgroundColor = "purple";

Ici, JavaScript modifie la couleur de fond de l’élément.

2. Modifier une couleur

JavaScript peut modifier plusieurs propriétés CSS.

const title = document.querySelector("h1");

title.style.color = "red";

La propriété CSS color devient :

style.color

3. Modifier plusieurs styles

Plusieurs propriétés CSS peuvent être modifiées.

const box = document.querySelector(".box");

box.style.backgroundColor = "black";

box.style.color = "white";

box.style.padding = "20px";

4. CSS et camelCase

En JavaScript, les propriétés CSS utilisent le camelCase.

5. classList

La propriété classList permet de manipuler les classes CSS.

const box = document.querySelector(".box");

box.classList.add("active");

Ici, JavaScript ajoute la classe :

active

6. add()

La méthode add() ajoute une classe CSS.

box.classList.add("visible");

Après l’exécution, la classe visible est ajoutée à l’élément.

7. remove()

La méthode remove() retire une classe CSS.

box.classList.remove("hidden");

8. toggle()

La méthode toggle() ajoute ou retire automatiquement une classe.

box.classList.toggle("open");

Si la classe existe : elle est retirée.

Sinon : elle est ajoutée.

9. contains()

La méthode contains() vérifie si une classe existe.

const result = box.classList.contains("active");

console.log(result);

10. Afficher ou cacher un élément

JavaScript peut modifier la visibilité d’un élément.

const modal = document.querySelector(".modal");

modal.style.display = "none";

Ici, l’élément devient invisible.

11. Changer une classe dynamiquement

Une classe peut être ajoutée après une interaction utilisateur.

const button = document.querySelector("button");

button.addEventListener("click", () => {

    button.classList.toggle("active");

});

Cette technique est très utilisée pour :

• Menus
• Modales
• Animations
• Dark mode

12. Style direct vs classList

En pratique, classList est souvent préférable.

13. Exemple complet

const button = document.querySelector("button");

const box = document.querySelector(".box");

button.addEventListener("click", () => {

    box.classList.toggle("dark");

});

.dark {

    background-color: black;
    color: white;

}

Ici :

• L’utilisateur clique
• JavaScript ajoute ou retire une classe
• Le CSS change automatiquement

14. Bonnes pratiques

• Préférer classList pour les gros styles
• Utiliser style pour les modifications rapides
• Éviter de multiplier les styles inline
• Utiliser des classes CSS claires
• Garder la logique JS séparée du CSS

Résumé rapide