Travailler avec les styles dans le DOM

Lorsqu'on travaille avec le Document Object Model (DOM) en JavaScript, modifier l'apparence d'un élément à l'exécution est l'une des tâches les plus courantes. Ce guide présente les méthodes pratiques pour appliquer des styles aux éléments DOM : écrire des styles inline, lire et définir des propriétés CSS individuelles via la propriété style, remplacer plusieurs propriétés en une fois avec cssText, lire les styles résolus avec getComputedStyle(), et — l'approche recommandée dans la plupart des cas — basculer des classes CSS avec l'API classList.

En résumé : préférez les classes aux styles inline. La manipulation directe des styles convient pour des valeurs calculées à l'exécution (une position, une couleur choisie dynamiquement), mais pour tout ce qui représente un état — « actif », « terminé », « erreur » — définissez une classe en CSS et basculez-la depuis JavaScript. Ce guide présente les deux approches, puis explique quand chacune est l'outil adapté. Pour une vue d'ensemble du stylage des éléments, voir Styles et Classes.

Styles inline

Les styles inline appliquent du CSS directement à un élément HTML via son attribut style. Ils sont utiles pour des modifications ponctuelles, mais ne passent pas à l'échelle : ils mélangent la présentation au balisage, ne peuvent pas être réutilisés, et remportent tous les combats de spécificité sauf !important, ce qui les rend difficiles à surcharger ensuite.

Exemple

<div id="inlineStyleExample">This text will be styled using inline styles.</div>
<button onclick="applyInlineStyle()">Apply Inline Style</button>

<script>
  function applyInlineStyle() {
    const element = document.getElementById('inlineStyleExample');
    element.style.color = 'red';
    element.style.fontSize = '20px';
  }
</script>

Dans cet exemple, cliquer sur le bouton applique des styles inline à l'élément div, changeant la couleur du texte en rouge et la taille de police à 20 pixels.

Définir des styles avec la propriété style

La propriété style vous donne un objet CSSStyleDeclaration qui correspond au style inline de l'élément. La lire et l'écrire équivaut en JavaScript à modifier l'attribut style — elle partage donc les mêmes compromis que les styles inline, mais permet de calculer des valeurs dynamiquement.

Deux règles piègent souvent les développeurs :

• Les noms de propriétés CSS deviennent camelCase. Les propriétés avec des tirets comme font-size et background-color deviennent style.fontSize et style.backgroundColor. La seule exception est float, qui s'écrit style.cssFloat car float est un mot réservé.
• Les valeurs sont des string, avec des unités. element.style.width = 200 ne fait rien ; il faut écrire element.style.width = '200px'. De même, lire element.style.color après l'avoir défini renvoie une string telle que 'rgb(0, 0, 255)'.

Exemple

<div id="stylePropertyExample">This text will be styled using JavaScript.</div>
<button onclick="applyStyleProperty()">Apply Style Property</button>

<script>
  function applyStyleProperty() {
    const element = document.getElementById('stylePropertyExample');
    element.style.color = 'blue';
    element.style.fontSize = '18px';
    element.style.margin = '10px';
  }
</script>

Dans cet exemple, cliquer sur le bouton applique plusieurs styles à l'élément div via la propriété style. La couleur du texte est définie en bleu, la taille de police à 18 pixels, et une marge de 10 pixels est ajoutée.

Définir plusieurs propriétés en une fois avec cssText

Assigner une propriété à la fois déclenche une écriture distincte à chaque fois. Lorsque vous devez définir plusieurs propriétés ensemble, style.cssText permet de les assigner en une seule instruction en utilisant la syntaxe CSS ordinaire :

element.style.cssText = 'color: white; background-color: navy; padding: 8px;';

Notez qu'assigner cssText remplace tous les styles inline existants, donc utilisez-le pour définir un bloc complet plutôt que pour modifier une seule valeur. Pour supprimer une propriété individuelle, affectez-lui une string vide (element.style.color = '') ou appelez element.style.removeProperty('color').

Lire le style réel avec getComputedStyle()

La propriété style ne reflète que les styles inline. Si une couleur provient d'une feuille de style ou d'une classe, element.style.color est une string vide. Pour lire la valeur que le navigateur a réellement appliquée — après résolution des feuilles de style, des classes et de l'héritage — utilisez window.getComputedStyle() :

<p id="styledByCss">I am styled by a stylesheet.</p>
<button onclick="readStyle()">Read computed color</button>

<script>
  function readStyle() {
    const element = document.getElementById('styledByCss');
    // element.style.color would be '' — the color comes from CSS, not inline.
    const computed = window.getComputedStyle(element);
    alert('Computed color: ' + computed.color);
  }
</script>

<style>
  #styledByCss {
    color: green;
  }
</style>

Les valeurs calculées sont renvoyées sous une forme normalisée en lecture seule — les couleurs en rgb(...), les longueurs en px — ainsi getComputedStyle(element).color renvoie 'rgb(0, 128, 0)' plutôt que 'green'.

Manipulation des classes

La gestion des classes est la méthode recommandée pour styliser les éléments : le style réside dans votre CSS, et JavaScript ne fait que basculer les classes. La propriété classList expose une petite API bien nommée — add(), remove(), toggle(), contains(), replace() et item() — qui est plus claire et plus sûre que la construction de string avec className.

Pourquoi préférer classList à className ? Écrire element.className = 'highlight' écrase toutes les classes existantes, ce qui peut accidentellement supprimer des classes dont une autre partie de votre code dépend. classList.add('highlight') n'ajoute que cette classe et laisse les autres intactes.

Ajouter des classes

La méthode add() ajoute une ou plusieurs classes à un élément. Ajouter une classe déjà présente ne fait rien, donc il est sans danger de l'appeler plusieurs fois.

Exemple

<div id="addClassExample">This element will have classes added.</div>
<button onclick="addClass()">Add Class</button>

<script>
  function addClass() {
    const element = document.getElementById('addClassExample');
    element.classList.add('highlight', 'text-large');
  }
</script>

<style>
  .highlight {
    background-color: yellow;
  }

  .text-large {
    font-size: 24px;
  }
</style>

Dans cet exemple, cliquer sur le bouton ajoutera les classes highlight et text-large à l'élément div, en appliquant les styles correspondants.

Supprimer des classes

La méthode remove() supprime une ou plusieurs classes d'un élément. Supprimer une classe qui n'est pas présente est une opération sans effet, donc vous n'avez pas besoin de vérifier au préalable.

Exemple

<div id="removeClassExample" class="highlight text-large">
  This element will have classes removed.
</div>
<button onclick="removeClass()">Remove Class</button>

<script>
  function removeClass() {
    const element = document.getElementById('removeClassExample');
    element.classList.remove('highlight', 'text-large');
  }
</script>

<style>
  .highlight {
    background-color: yellow;
  }

  .text-large {
    font-size: 24px;
  }
</style>

Ici, cliquer sur le bouton supprimera les classes highlight et text-large de l'élément div.

Basculer des classes

La méthode toggle() ajoute une classe si elle est absente et la supprime si elle est présente — parfait pour les états activé/désactivé comme un menu ouvert ou une tâche terminée. Elle renvoie true si la classe est présente ensuite et false sinon.

Vous pouvez également forcer le résultat avec un second argument boolean : toggle('active', true) ajoute toujours la classe, et toggle('active', false) la supprime toujours. C'est pratique quand l'état souhaité provient d'une variable : element.classList.toggle('active', isActive).

Exemple

<div id="toggleClassExample">Click me to toggle the highlight class.</div>
<button onclick="toggleClass()">Toggle Class</button>

<script>
  function toggleClass() {
    const element = document.getElementById('toggleClassExample');
    element.classList.toggle('highlight');
  }
</script>

<style>
  .highlight {
    background-color: yellow;
  }

  .text-large {
    font-size: 24px;
  }
</style>

Dans cet exemple, cliquer sur le bouton activera et désactivera alternativement la classe highlight sur l'élément div.

Vérifier la présence d'une classe

La méthode contains() renvoie true si un élément possède une classe spécifique et false sinon. Utilisez-la pour prendre une décision selon l'état actuel, par exemple pour mettre à jour le libellé d'un bouton.

Exemple

<div id="containsClassExample" class="highlight">
  This element's classes will be checked.
</div>
<button onclick="checkClass()">Check Class</button>

<script>
  function checkClass() {
    const element = document.getElementById('containsClassExample');
    if (element.classList.contains('highlight')) {
      alert('The element has the highlight class.');
    } else {
      alert('The element does not have the highlight class.');
    }
  }
</script>

<style>
  .highlight {
    background-color: yellow;
  }

  .text-large {
    font-size: 24px;
  }
</style>

Ici, cliquer sur le bouton vérifiera si l'élément containsClassExample possède la classe highlight et affichera une alerte en conséquence.

Remplacer une classe

La méthode replace() échange une classe contre une autre en un seul appel et renvoie true si l'ancienne classe existait et a été remplacée. C'est plus propre que d'appeler remove() puis add() :

<div id="replaceClassExample" class="theme-light">Switch my theme.</div>
<button onclick="swapTheme()">Toggle theme</button>

<script>
  function swapTheme() {
    const element = document.getElementById('replaceClassExample');
    if (!element.classList.replace('theme-light', 'theme-dark')) {
      // It wasn't 'theme-light', so swap the other way.
      element.classList.replace('theme-dark', 'theme-light');
    }
  }
</script>

<style>
  .theme-light { background: #fff; color: #111; padding: 8px; }
  .theme-dark { background: #111; color: #fff; padding: 8px; }
</style>

classList est également itérable, et classList.item(index) renvoie la classe à une position donnée (ou null si l'index est hors limites), ce qui est parfois utile lorsque vous devez lire les classes une par une.

Exemple concret : liste de tâches interactive

Pour illustrer ces concepts dans un scénario réel, construisons une petite liste de tâches interactive. Les nouvelles tâches sont ajoutées à la liste, et cliquer sur une tâche active ou désactive une classe completed qui la barre — un cas d'école pour classList.toggle().

<div>
  <h2>To-Do List</h2>
  <p>Here, you can add new items, and mark it as completed by clicking on them.</p>
  <input type="text" id="newTask" placeholder="Add a new task" />
  <button id="addTaskButton">Add Task</button>
  <ul id="taskList"></ul>
</div>

<script>
  const newTaskInput = document.getElementById('newTask');
  const addTaskButton = document.getElementById('addTaskButton');
  const taskList = document.getElementById('taskList');

  addTaskButton.addEventListener('click', () => {
    const taskText = newTaskInput.value;
    if (taskText) {
      const taskItem = document.createElement('li');
      taskItem.textContent = taskText;
      taskItem.classList.add('task');

      taskItem.addEventListener('click', () => {
        taskItem.classList.toggle('completed');
      });

      taskList.appendChild(taskItem);
      newTaskInput.value = '';
    }
  });
</script>

<style>
  .task {
    cursor: pointer;
    padding: 5px;
    border-bottom: 1px solid #ccc;
  }

  .task.completed {
    text-decoration: line-through;
    color: gray;
  }
</style>

Dans cet exemple, nous créons une application de liste de tâches où les tâches peuvent être ajoutées et marquées comme terminées en cliquant dessus. La classe task stylise les tâches, tandis que la classe completed, appliquée avec la méthode toggle(), indique les tâches accomplies.

Bonnes pratiques

Pour garantir un code efficace et maintenable lors du travail avec les styles dans le DOM, considérez les bonnes pratiques suivantes :

1. Séparation des préoccupations : Gardez votre HTML, CSS et JavaScript séparés. Utilisez JavaScript pour manipuler les classes plutôt que de définir directement les styles chaque fois que possible. Cette approche maintient la séparation des préoccupations et rend votre code plus facile à gérer.
2. Évitez les styles inline : Utilisez les styles inline avec parcimonie. Les styles inline peuvent rendre votre HTML encombré et difficile à maintenir. Préférez plutôt ajouter et supprimer des classes définies dans votre CSS.
3. Utilisez des classes pour la réutilisabilité : Définissez des classes réutilisables dans votre CSS et utilisez JavaScript pour les basculer. Cette approche permet un style plus cohérent dans votre application et facilite la mise à jour des styles.
4. Tirez parti des méthodes de classList : Utilisez les méthodes de classList (add, remove, toggle, contains) pour gérer les classes efficacement. Ces méthodes sont simples et plus performantes que la manipulation directe de la propriété className.
5. Considérations de performance : Soyez attentif aux performances lors de la manipulation du DOM. Basculer une seule classe déclenche un seul recalcul de style, tandis que définir de nombreuses propriétés une à une sur element.style peut provoquer des recalculs répétés. Pour des conseils approfondis, voir Optimisation des performances DOM.

Conclusion

Manipuler les styles dans le DOM est essentiel pour des interfaces dynamiques et interactives. Utilisez la propriété style (et cssText) pour les valeurs calculées à l'exécution, getComputedStyle() pour lire les styles que le navigateur a réellement appliqués, et l'API classList — add, remove, toggle, contains, replace — pour tout ce qui représente un état réutilisable. En règle générale, privilégiez d'abord les classes et n'utilisez les styles inline que lorsque c'est indispensable.

Pour continuer à explorer le DOM, découvrez Manipulation du DOM, Sélectionner des éléments DOM et Attributs et Propriétés.

Pratique