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