在前端开发中，我们经常需要操作 DOM 元素的 class 属性，比如添加、删除或切换类名等。而 npm 包 classlist 就提供了一种更加方便和易用的方法来操作元素的类名。
安装
使用 npm 安装 classlist：
--- ------- --------- ------
使用
在需要使用的模块中引入 classlist：
----- - ---- ------- ------- -------- - - ---------------------
或者使用 ES6 模块的方式：
------ - ---- ------- ------- -------- - ---- ------------
添加类名
使用 add 函数添加一个或多个类名：
------------ --------- --------- -----
删除类名
使用 remove 函数删除一个或多个类名：
--------------- --------- --------- -----
切换类名
使用 toggle 函数切换一个类名的状态，如果已存在则删除，否则添加：
--------------- ---------
检查是否包含类名
使用 contains 函数检查一个元素是否包含指定的类名：
----------------- ---------
示例代码
下面是一个简单的示例，点击按钮时会给 div 元素添加或删除 active 类名：
---- ---------------
------- ------------------ ---------------
--------
----- - ------ - - ---------------------
----- --- - -------------------------------
----- ------ - ----------------------------------
-------------------------------- -- -- -
----------- ----------
---
---------学习和指导意义
classlist 提供了一种更加方便和易用的方法来操作元素的类名，它可以让我们少写很多重复的代码，提高开发效率。同时，这个包也可以帮助我们更好地组织和管理代码，让代码更加清晰易懂。
除此之外，在学习使用 classlist 的过程中，我们还可以学习到模块化开发、ES6 模块等相关知识，从而提升自己的技术水平。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/35463