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