介绍
classie 是一个轻量级的 JavaScript 库，用于在 DOM 元素上添加、删除或切换类。它是前端开发中常用的工具库之一，让我们可以轻松地操作DOM元素的类名。
安装
通过 npm 安装 classie 最简单的方法是在终端中运行以下命令：
npm install classie安装完成后，在你的项目中导入 classie：
import classie from 'classie';
使用方法
添加类名
要在 DOM 元素上添加类名，可以使用 add 方法，如下所示：
const element = document.querySelector('.my-element'); classie.add(element, 'my-class');
在上面的代码中，我们首先通过 querySelector 方法获取了一个元素，然后使用 classie 的 add 方法将 my-class 类名添加到该元素上。
删除类名
要从 DOM 元素中删除类名，可以使用 remove 方法，如下所示：
const element = document.querySelector('.my-element'); classie.remove(element, 'my-class');
在这个例子中，我们使用 remove 方法从 my-element 中删除了 my-class 类名。
切换类名
要在 DOM 元素之间切换类名，可以使用 toggleClass 方法，如下所示：
const element = document.querySelector('.my-element'); classie.toggle(element, 'my-class');
在上面的代码中，我们使用 toggle 方法切换了 my-element 元素的 my-class 类名。
检查类名
要检查 DOM 元素是否包含某个类名，可以使用 has 方法，如下所示：
const element = document.querySelector('.my-element'); if (classie.has(element, 'my-class')) { console.log('该元素包含 my-class 类名！'); }
在这个例子中，我们使用 has 方法检查了 my-element 元素是否具有 my-class 类名。
示例代码
以下是一个完整的示例代码，演示如何在用户单击按钮时在元素之间切换类名：
<!-- HTML --> <div class="my-element"></div> <button id="toggle">Toggle Class</button>
-- -------------------- ---- ------- -- ---------- ------ ------- ---- ---------- ----- ------- - -------------------------------------- ----- ------------ - ---------------------------------- -------------------------------------- -- -- - ----------------------- ---------- ---展开代码
在上面的代码中，我们首先获取了一个具有 my-element 类名的元素，并找到了一个用于切换类名的按钮。然后，我们将 click 事件添加到按钮上，在单击时使用 toggle 方法切换元素的 active 类名。
结论
classie 是一个小而强大的库，可大大简化前端开发中对 DOM 元素类名的操作。通过本文的介绍，你应该已经了解了如何在项目中使用 classie。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35583
