Basculer les classes d'éléments avec du JavaScript pur : un guide complet

Introduction

En JavaScript, le contrôle des classes d'éléments est crucial pour le développement Web dynamique. Une tâche courante consiste à basculer les classes pour modifier l'apparence ou la fonctionnalité d'un élément. Bien que jQuery ait rendu cette tâche simple, il est essentiel de comprendre comment l'accomplir en utilisant du JavaScript pur.

Solution jQuery et équivalents JavaScript

Le code jQuery fourni utilise la méthode toggleClass() pour basculer le classes de menu caché et de téléphone caché sur les éléments spécifiés.

JavaScript Équivalents :

• Option 1 (classList.toggle) :

Les navigateurs modernes prennent en charge la méthode classList.toggle(). Par exemple :

var menu = document.querySelector('.menu'); // Using a class instead, see note below.
menu.classList.toggle('hidden-phone');

• Option 2 (classList.js pour les anciens navigateurs) :

Anciens navigateurs peut utiliser la bibliothèque classlist.js pour implémenter classList.toggle(). Exemple :

var classList = require('classlist'); // Import the library
var menu = document.querySelector('.menu');
classList.toggle(menu, 'hidden-phone');

Clarification sur l'utilisation des identifiants

En remarque, il est recommandé d'éviter d'utiliser des identifiants dans votre code JavaScript. Les ID sont des valeurs globales qui s'infiltrent dans l'objet fenêtre JavaScript, ce qui peut entraîner un comportement inattendu et des fuites de mémoire potentielles. Utilisez plutôt des classes pour un code plus modulaire et encapsulé.