Wie schalte ich Elementklassen dynamisch mit reinem JavaScript um?

Elementklassen in reinem JavaScript umschalten: Eine vereinfachte Anleitung

Die Aufgabe, Elementklassen dynamisch zu ändern, kann mit reinem JavaScript gelöst werden. Dieser Prozess macht zusätzliche Frameworks oder Bibliotheken wie jQuery überflüssig.

jQuery-Konvertierung:

Beachten Sie das folgende jQuery-Snippet:

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

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

Reine JavaScript-Implementierung:

Um die gleiche Funktionalität in reinem JavaScript zu erreichen, wird häufig die Methode classList.toggle() verwendet. Diese Methode wird von den meisten modernen Browsern unterstützt.

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

Hinweis: Die Verwendung von IDs in JavaScript kann zu globalen Datenverlusten führen und wird generell nicht empfohlen.

ClassList.js für ältere Browser:

Für Browser, die classList.toggle() nicht nativ unterstützen, können Sie die Polyfüllung classlist.js integrieren.

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

Diese Implementierung zuverlässig schaltet Klassen um, ohne dass externe Bibliotheken oder Frameworks erforderlich sind, und bietet so einen prägnanten und effizienten Ansatz in reinem JavaScript.

Das obige ist der detaillierte Inhalt vonWie schalte ich Elementklassen dynamisch mit reinem JavaScript um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!