Umschalten von Elementklassen mit reinem JavaScript: Ein umfassender Leitfaden

Einführung

In JavaScript ist die Steuerung von Elementklassen für die dynamische Webentwicklung von entscheidender Bedeutung. Eine häufige Aufgabe besteht darin, Klassen umzuschalten, um das Erscheinungsbild oder die Funktionalität eines Elements zu ändern. Obwohl jQuery diese Aufgabe unkompliziert gemacht hat, ist es wichtig zu verstehen, wie man sie mit reinem JavaScript bewerkstelligen kann.

jQuery-Lösung und JavaScript-Äquivalente

Der bereitgestellte jQuery-Code verwendet die toggleClass()-Methode, um die umzuschalten Menü-versteckte und versteckte Telefonklassen für bestimmte Elemente.

JavaScript Äquivalente:

• Option 1 (classList.toggle):

Moderne Browser unterstützen die Methode classList.toggle(). Zum Beispiel:

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

• Option 2 (classList.js für ältere Browser):

Ältere Browser kann die Bibliothek classlist.js verwenden, um classList.toggle() zu implementieren. Beispiel:

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

Klarstellung zur ID-Nutzung

Als Randbemerkung wird empfohlen, die Verwendung von IDs in Ihrem JavaScript-Code zu vermeiden. IDs sind globale Werte, die in das JavaScript-Fensterobjekt eindringen und zu unerwartetem Verhalten und potenziellen Speicherverlusten führen können. Verwenden Sie stattdessen Klassen für modulareren und gekapselten Code.