class-inject 是一个优秀的 npm 包，它能够在 JavaScript 中动态添加或移除 CSS 类名。这个包非常实用，因为在前端开发中，我们经常要改变元素的 CSS 类名来达到一些效果，如动画效果、交互效果等。本文就详细介绍如何使用 class-inject，包括安装、引用、API 的使用等。
安装和引用
首先，你需要在你的项目中安装 class-inject。你可以通过以下命令行在终端中安装：
npm install --save class-inject
安装完成后，你可以在代码中使用 require() 来引用：
const classInject = require('class-inject')
接下来，我们就可以开始使用了。
API
injectClass()
该函数可以用来给 HTML 元素动态添加 CSS 类名。函数接受两个参数，第一个参数是元素的选择器，第二个参数是要添加的 CSS 类名。
// 给 id 为 "myElement" 的元素动态添加 "fadeIn" 类名
classInject.injectClass('#myElement', 'fadeIn');removeClass()
该函数可以用来给 HTML 元素动态移除 CSS 类名。函数接受两个参数，第一个参数是元素的选择器，第二个参数是要移除的 CSS 类名。
// 给 id 为 "myElement" 的元素移除 "fadeIn" 类名
classInject.removeClass('#myElement', 'fadeIn');toggleClass()
该函数可以用来给 HTML 元素动态切换 CSS 类名。函数接受两个参数，第一个参数是元素的选择器，第二个参数是要切换的 CSS 类名。
// 给 id 为 "myElement" 的元素切换 "fadeIn" 类名
classInject.toggleClass('#myElement', 'fadeIn');示例代码
下面是一个使用 class-inject 包的简单示例代码。这个示例代码会让 HTML 中名为"myElement" 的 DIV 元素在点击时动态加入或跳出 CSS 类名 "active"。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------- ------------
-------
------- -
----------------- -------
-
--------
-------
------
---- ------------------------
------- ----------------------------------------------------------------
--------
----- --------- - -------------------------------------
----------------------------------- -------- -- -
------------------------------------- ----------
--
---------
-------
-------我们可以看到，在这个示例代码中，我们首先在样式中定义了一个"active" CSS 类名，接着我们在 JavaScript 代码中引用了 class-inject 包，并在点击事件的监听器中使用了 toggleClass 函数来动态切换 "active" 类名。这样，点击按钮时，按钮的颜色会在黄色和默认颜色之间切换。
总结
class-inject 是一个非常实用的 npm 包，可以帮助我们在 JavaScript 中动态地添加、移除、切换 CSS 类名，帮助我们制作更加丰富的前端交互效果。在使用过程中，我们需要先将其安装到我们的项目中并引用它，然后使用其中的 API 来实现我们的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c2d81e8991b448d9cde