在前端开发中，我们经常需要在 HTML 元素上添加、移除 CSS 类。手动操作 DOM 来完成这个操作是很繁琐的，但幸运的是，有一个 npm 包叫做 class-on-off 可以使我们更轻松地添加、移除类。
什么是 class-on-off？
class-on-off 是一个简单易用的 npm 包，它可以帮助开发者在 HTML 元素上添加、移除 CSS 类。使用 class-on-off 可以使代码更加简洁和易维护。
使用 class-on-off
使用 class-on-off 非常简单，下面我们来介绍如何使用它。
安装 class-on-off
使用 npm 安装 class-on-off。
--- ------- ------------ ------
引入 class-on-off
在项目中需要使用 class-on-off 的地方，引入它：
------ ---------- ---- ---------------
在 HTML 元素上添加、移除 CSS 类
现在，我们可以使用 ClassOnOff 的 addClass() 和 removeClass() 方法来在 HTML 元素上添加、移除 CSS 类。
我们来看一个例子。假设我们有一个按钮元素：
------- ---------------------------
我们想要在按钮点击时，给按钮添加一个 active CSS 类，然后在按钮第二次点击时，移除它。
----- -------- - -------------------------------------
----- ---------- - --- ---------------------
---------------------------------- -- -- -
-- -------------------------- -
---------------------------------
- ---- -
------------------------------
-
---现在，当我们点击按钮时，它将添加一个 active 类。第二次点击时，它将移除 active 类。
指定 class 前缀
默认情况下，ClassOnOff 会将类添加到 HTML 元素的 class 列表中。但是有时我们需要将类添加到元素 ID 后面，这时我们可以指定一个 class 前缀。
----- ---------- - --- --------------------- - ------------ ----------- ---
现在，我们可以使用 addClass() 和 removeClass() 方法来添加、移除类名 my-prefix-active。
添加多个 CSS 类
使用 addClasses() 方法可以在 HTML 元素上添加多个 CSS 类：
------------------------------- --------- ----------
总结
class-on-off 是一个非常有用的 npm 包，它可以帮助我们更容易地在 HTML 元素上添加、移除 CSS 类。在本文中，我们介绍了如何使用 ClassOnOff 的 addClass()、removeClass() 和 addClasses() 方法来添加、移除类。我们还介绍了如何指定 class 前缀。希望这篇文章能帮助你更加方便地添加 CSS 类。
示例代码
--------- -----
------
------
----- ----------------
------------------- ------------
-------
------- -
------ ----
------------ -----
-
----------------- -
------- --- ----- -----
----------------- -------
-
--------
-------
------
------- ---------------------------
------- --------------
------ ---------- ---- -------------------------------------------------------
----- -------- - -------------------------------------
----- ---------- - --- -------------------- -
------------ -----------
---
---------------------------------- -- -- -
-- -------------------------- -
---------------------------------
- ---- -
------------------------------
-
---
---------
-------
-------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056c0d81e8991b448e5b7b