使用纯 JavaScript 切换元素类：综合指南

简介

在 JavaScript 中，控制元素类对于动态 Web 开发至关重要。一项常见任务是切换类以更改元素的外观或功能。虽然 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');

ID 使用说明

顺便说一句，建议避免在 JavaScript 代码中使用 ID。 ID 是泄漏到 JavaScript 窗口对象中的全局变量，这可能会导致意外行为和潜在的内存泄漏。相反，使用类来实现更加模块化和封装的代码。