在前端开发中，我们经常需要对 DOM 元素进行添加、删除、切换类名等操作。这时可以借助 window 对象下的 classList 属性来实现。但是，如果要在多个地方使用相同的代码，那么每次都手动编写 classList 相关的代码并不是一件很好的选择。此时，可以使用 npm 包 window-classlist 来简化操作。
什么是 window-classlist
window-classlist 是一个 npm 包，它可以为浏览器环境中的 DOM 元素添加一个 classList 对象，使得操作 class 更容易、更简洁。
如何使用 window-classlist
安装
使用 npm 安装：
npm i window-classlist
或者使用 yarn 安装：
yarn add window-classlist
引入
在需要使用的 js 文件中引入该 npm 包：
import 'window-classlist';
使用示例
假设我们有一个包含一些带有不同颜色的按钮的页面，并且每个按钮都有一个 active class，表示当前激活状态。我们现在要切换每个按钮的 active 状态，并且关联一个处理函数。
使用 window-classlist 可以很容易地完成这个需求：
<button class="btn red active">Red Button</button> <button class="btn green active">Green Button</button> <button class="btn blue active">Blue Button</button>
-- -------------------- ---- -------
------ -------------------
----- ---- - ----------------------------------
--- ------ --- -- ----- -
----------------------------- ---------- -
-------------------------------
----- ----- - -----------------
------------------ -------- ---------
---
-更多使用示例可以查看 window-classlist 的 Github 仓库。
总结
借助 npm 包 window-classlist，我们可以简化 DOM 元素操作中 class 相关的代码。如果你在前端开发中频繁地使用 classList 对象，则建议尝试使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671118dd3466f61ffe3c0