Maison  >  Article  >  interface Web  >  Comment basculer la classe d'un élément sans jQuery en JavaScript pur ?

Comment basculer la classe d'un élément sans jQuery en JavaScript pur ?

Susan Sarandon
Susan Sarandonoriginal
2024-10-21 11:11:29781parcourir

How to Toggle an Element's Class without jQuery in Pure JavaScript?

Basculer les classes d'éléments en JavaScript pur

Q : Comment basculer la classe d'un élément en JavaScript pur sans jQuery ?

La méthode toggleClass de jQuery fournit un moyen simple de basculer entre les classes d'un élément. Mais comment y parvenir en utilisant du JavaScript pur ?

A :

  1. document.classList.toggle():

    Les navigateurs modernes prennent en charge la méthode classList.toggle, qui simplifie la manipulation des classes. Par exemple :

    <code class="js">var menu = document.querySelector('.container-fluid');
    menu.classList.toggle('menu-hidden');</code>
  2. classList.js :

    Pour les navigateurs plus anciens dépourvus de classList.toggle, vous pouvez utiliser classList.js polyfill :

    <code class="js">var menu = document.querySelector('.menu');
    classList.toggle(menu, 'hidden-phone');</code>

Remarques supplémentaires :

  • Liste des classes : Utilisez les noms de classe au lieu des identifiants pour une efficacité améliorée.
  • Évitez les identifiants : Les identifiants créent des variables globales dans l'objet fenêtre JavaScript.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn