在前端开发中，我们经常需要根据某些条件来动态地添加或移除元素的 class，以实现特定的页面效果或交互。这个过程其实并不难，但却往往会让代码显得比较冗长和混乱。为了解决这个问题，我们可以使用 apply-classes 这个 npm 包。
apply-classes 概述
apply-classes 是一个简单易用的库，它允许我们通过传入一个对象，定义一组元素以及它们的 class，从而快速而直观地管理元素的 class。
apply-classes 对象的主要语法如下：
applyClasses({
element1: 'className1 className2',
element2: ['className3', 'className4'],
});这里，element1 和 element2 都是我们要处理的元素，它们分别附带了需要添加的 class 名称。
使用 apply-classes
接下来，我们会通过一个简单的示例来学习如何使用 apply-classes。
假设我们有一个包含多个按钮的页面，我们需要在单击某个按钮时，给它添加一个额外的 active class，并移除其他按钮上的 active class。在这种情况下，我们可以这样使用 apply-classes：
<div class="button-group"> <button id="btn1" class="button">按钮 1</button> <button id="btn2" class="button">按钮 2</button> <button id="btn3" class="button">按钮 3</button> </div>
-- -------------------- ---- -------
------ ------------ ---- ----------------
----- ------- - -------------------------------------
------------------------ -- -
-------------------------------- -- -- -
--------------
------------ ---------
---------- ---
---
---
---这里，我们使用 querySelectorAll 查找所有的按钮，然后遍历它们，为每个按钮添加一个点击事件。在事件处理程序中，我们传入一个对象来更新按钮的 class。其中，[button.id] 表示当前按钮，我们把它的 class 设置为 active；[buttons] 则表示所有非当前按钮，我们把它们的 class 设置为空字符串。
apply-classes 的深度和学习意义
从上面的示例可以看出，apply-classes 的使用非常简单，而且可以显著减少代码量。它适用于大多
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ea981e8991b448dc13e