classList 类操作

切换类名是 JS 控制「状态外观」最推荐的方式：CSS 里用类写好样式（正常态、激活态、隐藏态），JS 只负责加减类，完全不用碰 style。这符合「结构与行为分离」的原则，样式也更好维护。

classList 提供四个方法：add 添加、remove 移除、toggle 切换（有则删、无则加，做开关最方便）、contains 判断是否包含。相比直接读写 className 字符串，classList 不会误伤其他类名。

典型应用场景：导航高亮（给当前项 add active）、下拉菜单开合（toggle open）、表单校验提示（错误时 add error）、暗色模式切换（给 body toggle dark）。

本节要点classList 的 add/remove/toggle/contains 四件套；toggle 天然适合做开关；样式写在 CSS 类里，JS 只切类名。

HTML

<style>
  .box { padding: 10px; border: 1px solid #888; transition: all .3s; }
  .active { background: #fff3cd; border-color: #f0c33c; }
  .big { font-size: 20px; }
</style>
<div id="box" class="box">看我样式变化</div>
<script>
  const box = document.getElementById('box');

  box.classList.add('active');     // 添加类
  console.log('有 active 吗：', box.classList.contains('active'));

  box.classList.add('big');
  box.classList.remove('big');     // 移除类

  box.classList.toggle('big');     // 切换：没有就加，有就删
  console.log('最终类名：', box.className);

  // 常见实战：点击切换开关状态
  box.addEventListener('click', () => box.classList.toggle('active'));
</script>

🔗 相关词条暗色模式 CSS JS DOM 操作 DOM

📚 推荐阅读

十大经典排序算法万象云档

阮一峰《TypeScript 教程》万象云档

IndexedDB API 3.0万象云档

Socket.IO v4 中文文档万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读