在前端开发中，经常需要动态地改变 HTML 元素的类来实现样式、交互等效果。本文将介绍如何使用纯 JavaScript 在 HTML 中切换类，方便快捷地实现这一功能。
1. 获取元素和操作类名
要切换元素的类，首先需要获取该元素。可以使用 document.querySelector 或 document.getElementById 方法获取元素。假设我们要获取一个 ID 为 myElement 的元素，代码如下：
const myElement = document.getElementById('myElement');获取元素之后，就可以通过 classList 属性获取该元素的类列表，进而进行添加或删除操作。例如：
myElement.classList.add('active');
myElement.classList.remove('inactive');2. 切换类名
在获取到元素和操作类名之后，即可开始切换类了。可以通过 classList.toggle() 方法来实现，该方法会自动判断当前元素是否已经有该类名，有则删除，没有则添加。例如：
myElement.classList.toggle('active');如果该元素原来没有 active 类，则添加该类；如果原来已经有 active 类，则删除该类。
3. 示例代码
下面是一段示例代码，演示如何点击按钮来切换一个元素的类：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------------------- -------- --------- - --------- ---- --------------- ----- --- --------- --------- --------------- - ---------- - -------- --------- - ------------------------------------- -------- --------- - ------------------------------------- -------------------- - ---------- - ----------------------------------------- ----- ---- ---------- ------- ------ --- -------------------------- -------- ---------------------------- ------- -------
在这个示例中，当用户点击 切换类名 按钮时，会切换 myElement 元素的 active 类，从而改变其字体颜色和粗细。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27461