简介
在前端开发中，我们一般会通过操作类名来实现样式的变化。而在较老的浏览器中，对于类名的操作会存在兼容性问题，这就需要引入 classlist-poly 这个 npm 包了。
classlist-poly 是一个为不支持 classList API 的浏览器提供支持的 polyfill 包。它能让开发者在操作类名时，无需考虑浏览器兼容性问题。接下来，我们将详细介绍该包的使用方法。
安装
安装 classlist-poly 可以通过 npm 包管理工具完成。在终端中执行以下代码即可安装：
npm install classlist-poly --save
使用方法
使用 classlist-poly 主要有以下两种方式：
方式一：引入
在需要使用 classlist-poly 的页面中，使用以下方式引入 classlist-poly：
<script src="./node_modules/classlist-poly/classList.min.js"></script>
引入成功后，classList 就可以在当前页面中使用了。
方式二：全局安装
全局安装 classlist-poly 后，可以在所有页面中无需额外引入 classlist-poly。在终端中执行以下代码即可全局安装 classlist-poly：
npm install -g classlist-poly
然后，在需要使用 classlist-poly 的项目中，可以直接使用 classList，无需额外引入。
API
classlist-poly 主要提供以下 API：
add(class1, class2, ..., classN)
添加一个或多个类名。
element.classList.add('class1', 'class2', 'class3');remove(class1, class2, ..., classN)
删除一个或多个类名。
element.classList.remove('class1', 'class2', 'class3');item(index)
返回指定索引位置的类名。
element.classList.item(2);
toggle(class, force)
如果存在类名，则删除该类名；如果不存在，则添加该类名。force 参数为 true，则强制添加类名。
element.classList.toggle('active'); // 添加或删除 active 类名
element.classList.toggle('active', true); // 强制添加 active 类名
element.classList.toggle('active', false); // 强制删除 active 类名contains(class)
判断是否存在指定类名。
element.classList.contains('active');replace(oldClass, newClass)
将一个类名替换为另一个类名。
element.classList.replace('oldClass', 'newClass');示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
--------------------- ------------
------- --------------------------------------------------------------
-------
------
---- -------- ------------------
------- ------------------------------- ---------------
--------
-------- -------------- -
--- --- - -------------------------------
-------------------------------
-
---------
-------
-------在该示例中，我们使用 classlist-poly 将 div 元素的类名在红色和激活状态之间切换。当点击按钮时，执行 toggleActive 函数，将激活状态的类名添加/删除。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005591d81e8991b448d6901