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