Comment changer la classe d'un élément avec JavaScript ?

Utilisation de la Propriété className

La propriété className modifie la classe d'un élément. Pour remplacer toutes les classes, utilisez :

element.className = "nouvelleClasse";

Pour ajouter une nouvelle classe sans supprimer les existantes :

element.className += " nouvelleClasse";

Pour supprimer une classe :

element.className = element.className.replace("classeÀSupprimer", "");

element.className = element.className.replace("classeÀSupprimer", "").trim();

Utilisation de l'API classList

L'API classList offre des méthodes pour manipuler les classes :

// Ajouter une classe
element.classList.add("nouvelleClasse");

// Supprimer une classe
element.classList.remove("ancienneClasse");

// Basculer une classe (ajouter si absente, supprimer si présente)
element.classList.toggle("classeÀBasculer");

Ces méthodes fonctionnent dans les navigateurs modernes, mais peuvent ne pas fonctionner dans les anciennes versions d'Internet Explorer. Pour une meilleure compatibilité, utilisez un polyfill ou utilisez la propriété className.

Utilisation de getElementById()

La méthode getElementById() sélectionne un seul élément en fonction de son attribut ID. Cette méthode est rapide :

const element = document.getElementById('myElementId');

Cette méthode fonctionne bien lorsque vous devez manipuler un élément spécifique sur votre page. Elle est utile pour les éléments qui ne changent pas ou ne se déplacent pas dans votre structure HTML.

Utilisation de querySelector() et querySelectorAll()

Ces méthodes vous offrent plus d'options pour sélectionner des éléments :

querySelector() sélectionne le premier élément qui correspond au sélecteur CSS :

const element = document.querySelector('.myClass');

querySelectorAll() sélectionne tous les éléments qui correspondent au sélecteur, renvoyant une NodeList :

const elements = document.querySelectorAll('.myClass');

Ces méthodes vous permettent de sélectionner des éléments selon différents critères :

• Par classe : querySelector('.className')
• Par ID : querySelector('#idName')
• Par nom de balise : querySelector('div')
• Par attribut : querySelector('[data-attribute]')
• Par relation : querySelector('ul > li')

Vous pouvez combiner les sélecteurs pour un ciblage plus spécifique :

const element = document.querySelector('div.myClass[data-attribute="value"]');

Ces méthodes sont utiles lorsque vous devez sélectionner des éléments basés sur des critères complexes ou lorsque vous voulez manipuler plusieurs éléments à la fois.

// Sélectionner tous les paragraphes à l'intérieur d'une div avec la classe 'content'
const paragraphs = document.querySelectorAll('div.content p');

// Parcourir les paragraphes sélectionnés et ajouter une classe
paragraphs.forEach(paragraph => {
  paragraph.classList.add('highlighted');
});

Gestion des événements de clic

Pour changer les classes lorsqu'un utilisateur clique sur un élément, vous pouvez utiliser la méthode addEventListener(). Cette méthode ajoute un écouteur d'événements à l'élément, qui exécute une fonction lorsque l'événement se produit.

Voici comment changer une classe au clic :

const button = document.querySelector('#myButton');

button.addEventListener('click', function() {
  this.classList.toggle('active');
});

Dans cet exemple, cliquer sur le bouton bascule la classe 'active'.

Vous pouvez également utiliser des fonctions fléchées pour les écouteurs d'événements :

button.addEventListener('click', () => {
  button.classList.add('clicked');
});

Réagir à d'autres événements

Outre les clics, vous pouvez réagir à d'autres événements pour changer les classes :

1. Survol et sortie de la souris :

const element = document.querySelector('#myElement');

element.addEventListener('mouseover', () => {
  element.classList.add('hovered');
});

element.addEventListener('mouseout', () => {
  element.classList.remove('hovered');
});

2. Pression de touche :

document.addEventListener('keypress', (event) => {
  if (event.key === 'Enter') {
    document.body.classList.toggle('dark-mode');
  }
});

3. Soumission de formulaire :

const form = document.querySelector('#myForm');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  form.classList.add('submitted');
});

4. Défilement :

window.addEventListener('scroll', () => {
  const header = document.querySelector('header');
  if (window.scrollY > 100) {
    header.classList.add('scrolled');
  } else {
    header.classList.remove('scrolled');
  }
});

Ces exemples montrent comment utiliser les événements pour déclencher des changements de classe. En combinant ces méthodes, vous pouvez créer des pages web dynamiques qui répondent aux actions de l'utilisateur.

document.querySelector('#parentElement').addEventListener('click', (event) => {
  if (event.target.matches('.childClass')) {
    event.target.classList.toggle('active');
  }
});

const element = document.querySelector('#myElement');

element.addEventListener('dblclick', () => {
  element.classList.toggle('enlarged');
});