element.classList 类名操作
最后更新：2026-09-09
element.classList 类名操作
classList 提供添加、删除、切换、检查 CSS 类的方法。操作元素样式的标准方式。
| 分类 | DOM 操作 |
|---|---|
| ES 版本 | DOM |
📝 语法
元素.classList.add('类名');返回值：DOMTokenList 对象。
是否修改原值：是（原地修改）
▶ 示例
编辑下方代码，点击运行，在输出面板查看结果：
运行结果：
true💡 提示 classList.toggle 是展开/收起菜单的标准方法——有则删无则加。
ℹ️ info classList 完全替代了旧的 className 字符串操作——更安全且不会覆盖已有类名。
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| element.classList | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有现代浏览器均支持 | |||||
🏷️ 相关条目
💡 相关案例
更多实战案例即将上线，敬请期待。
📚 相关教程
❓ 常见问题
QclassList 和 className 的区别？
AclassList 提供方法级操作（不会覆盖已有类名）；className 直接设置整个 class 字符串。
Qtoggle 的返回值？
A布尔值——true 表示添加了类名，false 表示移除了。
QclassList 能一次添加多个类名吗？
A能——add('a', 'b', 'c') 可传多个参数。
