Переключение классов элементов с помощью чистого JavaScript: подробное руководство

Введение

В JavaScript управление классами элементов имеет решающее значение для динамической веб-разработки. Одной из распространенных задач является переключение классов для изменения внешнего вида или функциональности элемента. Хотя jQuery упростил эту задачу, важно понимать, как ее выполнить, используя чистый JavaScript.

Решение jQuery и эквиваленты JavaScript

Приведенный код jQuery использует метод toggleClass() для переключения Классы меню-скрытого и скрытого телефона для указанных элементов.

Эквиваленты JavaScript:

• Вариант 1 (classList.toggle):

Современные браузеры поддерживают метод classList.toggle(). Например:

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

• Вариант 2 (classList.js для устаревших браузеров):

Старые браузеры можно использовать библиотеку classlist.js для реализации classList.toggle(). Пример:

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

Разъяснения по использованию идентификаторов

Примечание: рекомендуется избегать использования идентификаторов в коде JavaScript. Идентификаторы — это глобальные переменные, которые просачиваются в объект окна JavaScript, что может привести к неожиданному поведению и потенциальным утечкам памяти. Вместо этого используйте классы для более модульного и инкапсулированного кода.