Comment basculer les classes d'éléments avec du JavaScript pur ?

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.

Équivalents JavaScript :

• Option 1 (classList.toggle) :

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

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

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

Les navigateurs plus anciens peuvent utiliser la bibliothèque classlist.js pour implémenter classList.toggle(). Exemple :

<code class="javascript">var classList = require('classlist'); // Import the library
var menu = document.querySelector('.menu');
classList.toggle(menu, 'hidden-phone');</code>

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é.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!