Styles et classes en JavaScript

Introduction

Il existe deux façons de modifier l'apparence d'un élément depuis JavaScript :

1. Ajouter ou supprimer une classe CSS — la mise en forme réside dans une feuille de style, et JavaScript se contente d'activer ou de désactiver la classe. C'est l'approche recommandée.
2. Définir un style inline directement sur l'élément avec la propriété style — utile lorsque la valeur est calculée à l'exécution (par exemple, une position qui dépend de la souris).

Ce chapitre couvre les deux approches : les API className et classList pour travailler avec les classes, la propriété style et cssText pour les styles inline, et getComputedStyle pour lire les styles finaux réellement appliqués par le navigateur. Pour une vue d'ensemble de CSS et du DOM, voir Travailler avec les styles dans le DOM.

La propriété style

Manipulation directe des styles

La propriété style est un object dont les clés correspondent aux propriétés CSS inline de l'élément. Pour modifier le style d'un élément directement depuis JavaScript, assignez une valeur à l'une de ces clés. Voici un exemple de modification de la couleur d'arrière-plan et de la taille de police d'un paragraphe :

<!-- snippet: html-result -->

<style>
  #myParagraph {
    color: white; /* Ensures text is readable on a blue background */
  }
</style>
<div id="myParagraph">This is a paragraph.</div>
<script>
document.getElementById("myParagraph").style.backgroundColor = "blue";
document.getElementById("myParagraph").style.fontSize = "16px";
</script>

Notez les noms des propriétés : CSS utilise des tirets (background-color, font-size), mais l'object style utilise le camelCase (backgroundColor, fontSize). Les propriétés composées de plusieurs mots suivent toujours cette règle, et les propriétés préfixées conservent le tiret initial comme lettre majuscule (-moz-border-radius devient MozBorderRadius). Les valeurs sont toujours des string, et les valeurs CSS numériques doivent inclure leur unité — el.style.fontSize = "16px", pas 16.

Assigner à el.style.backgroundColor écrit dans l'attribut style="..." de l'élément, ce qui n'affecte que cet élément et remplace les règles de la feuille de style (le poids est identique à celui d'un style inline d'auteur). Pour supprimer une valeur inline, assignez une string vide : el.style.fontSize = "".

Cette méthode offre un contrôle direct mais peut devenir fastidieuse pour de multiples changements de style.

Utiliser style.cssText

Pour appliquer plusieurs changements de style efficacement, utilisez style.cssText :

<!-- snippet: html-result -->

<style>
  #myParagraph {
    padding: 5px;
    width: 200px;
    text-align: center;
  }
</style>
<div id="myParagraph">Another paragraph.</div>
<script>
document.getElementById("myParagraph").style.cssText = "background-color: blue; font-size: 16px; border: 1px solid black";
</script>

Cette approche regroupe les changements de style en une seule opération. Notez que cssText remplace l'intégralité du style inline, effaçant toutes les propriétés déjà définies sur l'élément. Utilisez-le lorsque vous voulez repartir de zéro ; utilisez les assignations individuelles style.* lorsque vous souhaitez modifier une propriété sans toucher aux autres.

Lire les styles avec getComputedStyle

La propriété style ne reflète que les styles inline — les valeurs définies dans l'attribut style ou via JavaScript. Elle retourne une string vide pour tout ce qui provient d'une feuille de style. Pour lire la valeur finale et résolue réellement rendue par le navigateur (depuis chaque feuille de style, règle inline et valeur héritée), utilisez getComputedStyle :

<!-- snippet: html-result -->

<style>
  #box { width: 10em; padding: 5px; }
</style>
<div id="box">Measure me</div>
<script>
const box = document.getElementById("box");
const styles = getComputedStyle(box);
// Computed values are resolved to absolute units (px), not the "10em" we wrote:
console.log(styles.width);   // "160px" (10em at the default 16px font size)
console.log(styles.padding); // "5px"
</script>

Quelques règles à retenir :

• L'object retourné est en lecture seule — lui assigner une valeur n'a aucun effet ; utilisez element.style pour modifier les styles.
• Les valeurs sont résolues : les longueurs sont retournées en pixels, les couleurs sous forme rgb(...).
• Lisez toujours une propriété spécifique (getComputedStyle(el).marginTop), et préférez le nom en forme longue — certaines propriétés raccourcies (margin, padding) sont retournées de manière incohérente selon les navigateurs.

className vs classList

Il existe deux façons de lire et d'écrire les classes d'un élément :

• element.className est une string unique contenant l'intégralité de l'attribut class. Lui assigner une valeur remplace toutes les classes d'un coup : el.className = "active warning". Pratique pour définir toutes les classes depuis zéro, mais peu commode pour n'en modifier qu'une seule.
• element.classList est un object spécial doté de méthodes pour travailler avec des classes individuelles — add, remove, toggle, contains et replace. C'est ce que vous utiliserez la plupart du temps, car il permet de modifier une classe sans perturber les autres.

Les méthodes sont :

(La propriété s'appelle className, et non class, car class est un mot réservé en JavaScript — voir Attributs et propriétés.)

Ajouter et supprimer des classes

L'API classList facilite la manipulation des classes.

Ajouter une classe

<!-- snippet: html-result -->

<style>
  .new-class {
    font-weight: bold;
    color: green;
  }
</style>
<div id="myDiv">Class manipulation</div>
<script>
document.getElementById("myDiv").classList.add("new-class");
</script>

Supprimer une classe

<!-- snippet: html-result -->

<style>
  .existing-class {
    text-decoration: underline;
    color: red;
  }
</style>
<div id="myDiv" class="existing-class">Another manipulation example</div>
<script>
document.getElementById("myDiv").classList.remove("existing-class");
</script>

Basculer une classe

La fonctionnalité de bascule est efficace pour changer de styles, comme les thèmes :

<!-- snippet: html-result -->

<style>
  .dark-mode {
    background-color: black;
    color: white;
  }
</style>
<button id="toggleButton">Toggle Dark Mode</button>
<script>
document.getElementById("toggleButton").addEventListener("click", function() {
  document.body.classList.toggle("dark-mode");
});
</script>

Gérer plusieurs classes

Gérez plusieurs classes simultanément :

<!-- snippet: html-result -->

<style>
  .first-class { background-color: yellow; }
  .second-class { border: 2px dashed blue; }
  .third-class { display: none; }
  .fourth-class { font-size: 14px; }
</style>
<div id="myDiv">Multiple class handling</div>
<script>
document.getElementById("myDiv").classList.add("first-class", "second-class");
document.getElementById("myDiv").classList.remove("third-class", "fourth-class");
</script>

Vérifier et remplacer des classes

Utilisez contains pour conditionner du code selon la présence d'une classe, et replace pour échanger une classe contre une autre en un seul appel :

const el = document.getElementById("myDiv");

el.classList.contains("active"); // false

el.classList.add("active");
el.classList.contains("active"); // true

// Swap "active" for "disabled" (returns true if the swap happened):
el.classList.replace("active", "disabled"); // true
el.classList.contains("active");            // false
el.classList.contains("disabled");          // true

toggle accepte également un deuxième argument optionnel qui force le résultat : classList.toggle("open", isOpen) ajoute la classe quand isOpen est true et la supprime quand elle est false, ce qui est pratique lorsque l'état souhaité est déjà stocké dans un boolean.

Bonnes pratiques : classes vs styles inline

Préférez les classes aux styles inline. Gardez la mise en forme dans votre CSS et laissez JavaScript se contenter de basculer un nom de classe. Cela sépare la présentation du comportement, de sorte que les designers peuvent modifier l'apparence sans toucher aux scripts, la même classe peut être réutilisée sur de nombreux éléments, et vos styles restent en un seul endroit facilement consultable.

Recourez à element.style uniquement lorsqu'une valeur doit véritablement être calculée à l'exécution — la position d'un élément qui suit la souris, une largeur dérivée de données, une couleur choisie par l'utilisateur. Ces valeurs ne peuvent pas figurer dans une feuille de style statique, donc une valeur inline est l'outil approprié.

Lorsqu'un changement de classe doit être animé plutôt que brusque, définissez une transition CSS sur la propriété et laissez le basculement de la classe la piloter. Le navigateur gère l'animation sur son chemin d'exécution optimisé, ce qui est plus fluide que de modifier des valeurs depuis JavaScript. Voir Animations CSS pour les détails.

Conclusion

Utilisez classList (add, remove, toggle, contains, replace) pour gérer les classes et laissez votre feuille de style effectuer le travail visuel ; revenez à element.style uniquement pour les valeurs qui doivent être calculées à l'exécution ; et lisez les valeurs finales appliquées avec getComputedStyle — en gardant à l'esprit qu'il est en lecture seule. Conserver la mise en forme dans CSS et laisser JavaScript basculer les classes conduit à un code plus facile à maintenir et plus rapide à rendre.

Pratique