element.classList.add()、remove()、toggle() 可安全操作 CSS 类:add() 添加类(重复忽略),remove() 删除类(不存在静默忽略),toggle() 切换类并支持布尔强制控制,还可配合展开运算符处理动态类名列表。

直接用 element.classList.add()、remove() 和 toggle() 就能操作元素的 CSS 类,不用手动拼接或解析 className 字符串,简洁又安全。
add():添加一个或多个类
给元素添加指定的类名,已存在也不会报错,重复添加会被自动忽略。
可以传入多个字符串参数,一次添加多个类:
const btn = document.getElementById('myBtn');
btn.classList.add('active', 'highlight', 'pulse');
注意:不能传数组,如果类名存在变量中,需展开(ES6+):
const classes = ['disabled', 'hidden']; btn.classList.add(...classes); // ✅ 正确
remove():移除一个或多个类
删除指定类名,不存在的类会被静默忽略,不会报错。
同样支持多个参数:
btn.classList.remove('active', 'highlight');
也可配合展开运算符移除动态列表:
使用约定式提交(Conventional Commits)生成标准化的 Git 提交信息。适用于以下场景: (1) 暂存更改时需要提交信息; (2) 审查 diff 时希望获得结构化摘要; (3) 编写 PR 描述或变更日志(changelog)条目; (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff,并生成按类型(type)划分范围的提交信息。
const toRemove = ['loading', 'error']; btn.classList.remove(...toRemove);
toggle():切换类(有则删,无则加)
最常用在开关类场景,比如点击显示/隐藏、启用/禁用状态:
btn.classList.toggle('active'); // 点一次加 active,再点一次删 active
它还支持第二个布尔参数,强制设为「添加」或「移除」:
// 强制添加(不管原来有没有)
btn.classList.toggle('active', true);
// 强制移除(不管原来有没有)
btn.classList.toggle('active', false);
这个特性适合配合条件逻辑使用,比如根据数据状态统一控制类名。
额外提示:检查和清空类
判断是否包含某个类:element.classList.contains('xxx')
清空所有类(保留内联 style):element.className = '' 或 element.setAttribute('class', '');classList 本身不提供清空方法。
获取当前所有类(返回 DOMTokenList,类似数组):element.classList,可遍历或转成数组:[...element.classList]。

















