Comment basculer dynamiquement les classes d'éléments à l'aide de JavaScript pur ?

Basculer les classes d'éléments en JavaScript pur : un guide simplifié

La tâche de modification dynamique des classes d'éléments peut être réalisée en utilisant du JavaScript pur. Ce processus élimine le besoin de frameworks ou de bibliothèques supplémentaires comme jQuery.

Conversion jQuery :

Considérez l'extrait jQuery suivant :

$('.btn-navbar').click(function()
{
    $('.container-fluid:first').toggleClass('menu-hidden');
    $('#menu').toggleClass('hidden-phone');

    if (typeof masonryGallery != 'undefined') 
        masonryGallery();
});

Implémentation JavaScript pur :

Pour obtenir la même fonctionnalité en JavaScript pur, la méthode classList.toggle() est couramment utilisée. Cette méthode est prise en charge par la plupart des navigateurs modernes.

var menu = document.querySelector('.menu');  // Using a class instead of an ID
menu.classList.toggle('hidden-phone');

Remarque : L'utilisation d'identifiants en JavaScript peut entraîner une fuite globale et n'est généralement pas recommandée.

ClassList.js pour les navigateurs plus anciens :

Pour les navigateurs qui ne prennent pas en charge nativement classList.toggle(), vous pouvez incorporer le polyfill classlist.js.

var menu = document.querySelector('.menu');
menu.classList.toggle('hidden-phone');

Cette implémentation est fiable bascule les classes sans avoir besoin de bibliothèques ou de frameworks externes, offrant une approche concise et efficace en JavaScript pur.

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!