介绍
在前端开发中，我们经常需要动态地控制元素的类名，以适应不同的交互状态或样式需求。然而，手动管理类名往往会让代码变得冗长和易错。在这种情况下，使用一个专门管理类名的 npm 包就可以方便我们的开发。
what-class 包就是其中一个选择。它可以轻松进行添加、删除、切换类名的操作，支持链式调用，而且代码量非常小，即使在对性能要求较高的场景下也不会对页面负荷造成很大影响。
本文将为大家介绍如何使用 what-class 包，提供详细的学习和指导意义。
安装
在项目根目录下输入以下命令，即可安装 what-class 包：
--- ------- ----------
使用方法
引入
在需要使用 what-class 包的地方，使用以下语句进行引入：
----- --------- - ----------------------
初始化
一般情况下，我们会先声明一个变量来保存当前元素的类名，然后使用 whatClass 函数对它进行初始化，如下所示：
----- -- - -------------------------------------- --- ------- - --- ------------------------
添加类名
添加一个类名非常简单，只需要使用 add 方法即可。它支持传入多个参数，每个参数代表一个要添加的类名：
--------------------- ----------
删除类名
同样地，我们也可以使用 remove 方法来删除一个或多个类名：
------------------------ ----------
切换类名
如果我们需要根据某些条件来切换类名，那么 toggle 方法就可以派上用场了。它可以自动检测传入的类名是否已经存在，如果存在则删除，如果不存在则添加。我们可以使用以下语句来切换类名：
------------------------ ----------
查询类名
最后，我们可以使用 toString 方法来查询当前元素的类名，如下所示：
--- --------- - -------------------
链式调用
what-class 还支持链式调用的操作，如下所示：
------- -------------- ----------------- ------------------
这种写法看起来更加简洁，也更易读。
示例代码
下面是一个完整的示例，演示了如何使用 what-class 包进行类名的添加、删除和切换：
--------- -----
----- ----------
------
----- ----------------
----------------- ----------
-------
----------- -
----------------- -----
-------- -----
-
------------------ -
----------------- -----
-
--------
-------
------
---- --------------- -------------------
--------
------
------- --------------------------------------------------------------
--------
----- -- - --------------------------------------
--- ------- - --- ------------------------
------------- -- -
-- ----
----------------------
-- ------
------------- -- -
-- ----
-------------------------
-- ------
------------- -- -
-- ----
-------------------------
-- ------
---------
-------
-------当你在浏览器中打开该 HTML 文件后，你会看到一个白色的元素，1 秒后变成红色，再过 1 秒后变回白色，再过 1 秒后再变成红色。这是通过 what-class 包来管理类名实现的。如果你希望添加、删除、切换类名时有更多的控制和变化，可以修改 JavaScript 代码并刷新浏览器，即可看到效果。
总结
what-class 包是一个简单易用的 npm 包，专门用于管理类名。我们可以使用它来添加、删除、切换元素的类名，代码量极少，使用起来非常方便。当然，如果你对类名操作的需求较多，可以考虑使用更为强大的类库，如 classnames 等。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671098dd3466f61ffe002