介绍
classist 是一个轻量级的 JavaScript 库，可以帮助你为 HTML 元素提供简洁明了的 class 管理。
使用 classist，你可以很容易地添加、删除和切换元素的 class，而不必担心处理复杂的 class 字符串。
安装
你可以使用 npm 来安装 classist：
npm install classist --save
基本用法
classist 最常用的方法是 add、remove 和 toggle，它们分别代表了添加、删除和切换 class。
-- -------------------- ---- ------- ------ - --------- ------------ ----------- - ---- ----------- ----- ------- - ----------------------------------- -- -- ----- ----------------- ------------- -- -- ----- -------------------- ------------- -- -- ----- -------------------- -------------展开代码
classist 还可以更方便地一次添加多个 class：
-- -------------------- ---- ------- ------ - ----------- ------------- - ---- ----------- ----- ------- - ----------------------------------- -- ---- ----- ------------------- --------------- ---------------- -- ---- ----- ---------------------- --------------- ----------------展开代码
高级用法
classist 还支持其他一些高级用法，例如为元素添加初始 class、在多个元素之间切换 class 等。
初始化 class
你可以用 initClass 方法为元素设置一个初始 class，这个 class 会在添加、删除、切换时一直保留：
-- -------------------- ---- ------- ------ - --------- - ---- ----------- ----- ------- - ----------------------------------- -- --- ----- ------------------ ----------------- -- -- ----- ----------------- ------------- -- ------- - ----- --- -------------- ---------- -- -- ----- -------------------- ----------------- -- ------- - ----- -- ----------- -- -- ----- -------------------- ------------- -- ------- - ----- -- ---------------展开代码
多元素操作
classist 还支持在多个元素之间进行 class 操作，例如添加同一 class 到一组元素中：
import { addClassToAll } from 'classist'; const elements = document.querySelectorAll('.example'); // 添加 class 到所有元素中 addClassToAll(elements, 'new-class');
或者在多个元素之间切换同一 class：
import { toggleClassBetweenAll } from 'classist'; const elements = document.querySelectorAll('.example'); // 在所有元素之间切换 class toggleClassBetweenAll(elements, 'new-class');
总结
classist 是一个简单、轻量级的 JavaScript 库，可以方便地管理 HTML 元素的 class。它支持添加、删除、切换 class，也支持初始化 class 和在多个元素之间进行 class 操作。
如果你想更加深入地了解 classist，可以查看 官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/204067
