什么是 classie？
classie 是一款 JavaScript 库，它能够帮助我们方便地添加、移除、切换 HTML 元素的 class。它只有 1k 左右的大小，兼容 IE8+ 及现代浏览器。
classie 的安装
使用 npm 进行安装：
--- ------- ------- ------
或者直接将 classie.js 下载到本地，然后在 HTML 页面中引入：
------- ----------------------------------
classie 的使用
为了使用 classie，你需要先获取要操作的 DOM 元素。可以使用 document.querySelector 或者 document.querySelectorAll 方法获取元素，获取到元素后即可使用 classie 的方法。
添加 class
add(element, name) 方法用于给元素添加 class。第一个参数 element 是要操作的元素，第二个参数 name 是要添加的 class。
--- ---- - -------------------------------------- ----------------- ------------
你还可以一次添加多个 class，类名之间用空格隔开：
----------------- -------------- --------------------
移除 class
remove(element, name) 方法用于移除元素上的 class。第一个参数 element 是要操作的元素，第二个参数 name 是要移除的 class。
-------------------- ------------
如果要移除多个 class，也可以使用空格隔开：
-------------------- -------------- --------------------
切换 class
toggleClass(element, name) 方法用于切换元素上的 class。如果元素已经有该 class，则移除它；如果元素没有该 class，则添加它。
-------------------- ------------
如果需要在添加和移除 class 时区分大小写，可以在方法名后面加上 Class：
------------------------- ------------
检查 class
hasClass(element, name) 方法用于检查一个元素是否有指定的 class。第一个参数 element 是要操作的元素，第二个参数 name 是要检查的 class。该方法返回布尔值。
--- -------- - ---------------------- ------------
classie 示例
下面是一个简单的示例，演示如何在按钮点击时添加、移除 class：
--------- -----
------
------
----- ----------------
------- ----------------------------------
-------
------- -
----------- ----
-
--------
-------
------
------- -------------------- -----------
--------
--- ------ - -------------------------------------
-------------------------------- ---------- -
-------------------- ----------
---
---------
-------
-------总结
使用 classie 可以方便地操作元素上的 class，从而实现各种效果。在实际项目中，它可以搭配 CSS 过渡、动画等技术，实现更复杂的效果。不过，在使用 classie 时也需要注意一些问题，例如不要频繁添加、移除 class，避免影响性能。总之，掌握 classie 的使用方法，可以让我们的前端开发更加高效、方便。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562a281e8991b448dfd3d