在前端开发过程中，我们常常需要根据用户操作、数据状态变化动态调整页面元素的样式，动态修改CSS类名是最常用的实现方式之一。传统的className属性操作类名时，容易出现拼接错误、遗漏原有类名等问题，而classList API提供了更安全、便捷的类名操作方式，能很好地解决动态CSS类名覆盖的相关问题。
classList核心方法介绍
classList是DOM元素的一个只读属性，返回一个DOMTokenList集合，包含了元素的所有类名，它提供了多个实用方法用于操作类名，常用方法如下：
- add()：向元素添加一个或多个类名，如果类名已经存在则不会重复添加
- remove()：从元素移除一个或多个类名，如果类名不存在也不会报错
- toggle()：切换类名状态，如果类名存在则移除，不存在则添加，还可以传入第二个布尔值参数强制指定添加或移除
- contains()：判断元素是否包含某个类名，返回布尔值
- replace()：替换元素的一个类名为另一个类名，第一个参数是被替换的类名，第二个是新的类名
传统className方式的问题
在使用classList之前，开发者通常会通过className属性来修改类名，这种方式存在明显的不足：
比如我们需要给一个已经有base-class类的元素添加active类，使用className的代码通常如下：
// 原有元素 <div class="base-class"></div>
const element = document.querySelector('div');
// 错误方式：直接赋值会覆盖原有类名
element.className = 'active';
// 正确但需要拼接的方式
element.className = element.className + ' active';
上面的拼接方式很容易出现多个空格、遗漏原有类名的问题，如果要做类名切换，还需要先判断类名是否存在，代码繁琐且容易出错。
用classList实现动态类名覆盖
基础类名添加与移除
通过classList的add和remove方法，可以安全地对类名进行增删，不会影响到其他已有的类名：
// 获取目标元素
const box = document.getElementById('box');
// 添加单个类名
box.classList.add('active');
// 添加多个类名
box.classList.add('large', 'shadow');
// 移除单个类名
box.classList.remove('shadow');
// 移除多个类名
box.classList.remove('large', 'active');
类名切换与状态判断
toggle方法非常适合实现点击切换样式的场景，比如常见的菜单展开收起、按钮激活状态切换：
// 点击按钮切换盒子的激活状态
const toggleBtn = document.getElementById('toggleBtn');
const contentBox = document.getElementById('contentBox');
toggleBtn.addEventListener('click', function() {
// 切换active类名，自动处理存在/不存在的情况
contentBox.classList.toggle('active');
// 可以传入第二个参数强制控制：true表示添加，false表示移除
// contentBox.classList.toggle('active', true);
});
类名替换实现覆盖效果
当我们需要用一个新类名替换旧类名，实现样式覆盖时，replace方法是最优选择，比如从亮色主题切换到暗色主题：
const themeBox = document.getElementById('themeBox');
// 将light-theme类名替换为dark-theme，实现主题切换
themeBox.classList.replace('light-theme', 'dark-theme');
常见使用误区
在使用classList时，开发者常犯以下几个错误：
- 给add、remove方法传入多个类名时用空格拼接字符串，正确方式是传入多个参数，比如
element.classList.add('a', 'b')而不是element.classList.add('a b') - 误以为classList可以直接修改类名顺序，实际上DOMTokenList的类名顺序和添加顺序一致，不需要刻意调整顺序，CSS优先级由选择器决定而非类名顺序
- 在不存在的元素上调用classList方法，需要先判断元素是否存在，避免报错
兼容性说明
classList在现代浏览器中都有很好的支持，包括Chrome、Firefox、Safari、Edge等，IE10及以上版本也支持核心的add、remove、toggle、contains方法，如果需要兼容更低版本的浏览器，可以使用polyfill补充相关方法。
classList动态CSS类名JavaScriptCSS样式覆盖修改时间：2026-06-23 03:12:28