在前端开发中，我们经常需要在 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。
npm install class-on-off --save
引入 class-on-off
在项目中需要使用 class-on-off 的地方，引入它：
import ClassOnOff from 'class-on-off';
在 HTML 元素上添加、移除 CSS 类
现在，我们可以使用 ClassOnOff 的 addClass() 和 removeClass() 方法来在 HTML 元素上添加、移除 CSS 类。
我们来看一个例子。假设我们有一个按钮元素：
<button id="my-button">点击我</button>
我们想要在按钮点击时，给按钮添加一个 active CSS 类，然后在按钮第二次点击时，移除它。
-- -------------------- ---- -------
----- -------- - -------------------------------------
----- ---------- - --- ---------------------
---------------------------------- -- -- -
-- -------------------------- -
---------------------------------
- ---- -
------------------------------
-
---现在，当我们点击按钮时，它将添加一个 active 类。第二次点击时，它将移除 active 类。
指定 class 前缀
默认情况下，ClassOnOff 会将类添加到 HTML 元素的 class 列表中。但是有时我们需要将类添加到元素 ID 后面，这时我们可以指定一个 class 前缀。
const classOnOff = new ClassOnOff(myElement, {
classPrefix: 'my-prefix'
});现在，我们可以使用 addClass() 和 removeClass() 方法来添加、移除类名 my-prefix-active。
添加多个 CSS 类
使用 addClasses() 方法可以在 HTML 元素上添加多个 CSS 类：
classOnOff.addClasses('class1', 'class2', 'class3');总结
class-on-off 是一个非常有用的 npm 包，它可以帮助我们更容易地在 HTML 元素上添加、移除 CSS 类。在本文中，我们介绍了如何使用 ClassOnOff 的 addClass()、removeClass() 和 addClasses() 方法来添加、移除类。我们还介绍了如何指定 class 前缀。希望这篇文章能帮助你更加方便地添加 CSS 类。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------- ------------
-------
------- -
------ ----
------------ -----
-
----------------- -
------- --- ----- -----
----------------- -------
-
--------
-------
------
------- ---------------------------
------- --------------
------ ---------- ---- -------------------------------------------------------
----- -------- - -------------------------------------
----- ---------- - --- -------------------- -
------------ -----------
---
---------------------------------- -- -- -
-- -------------------------- -
---------------------------------
- ---- -
------------------------------
-
---
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c0d81e8991b448e5b7b