在前端开发中，动态修改元素的样式是常见需求，操作CSS类相比直接修改style属性更便于样式维护，JavaScript提供了多种方式实现CSS类的添加和移除。
使用classList属性操作CSS类
现代浏览器都支持元素的classList属性，它提供了一系列便捷的方法操作CSS类，是最推荐的使用方式。
添加CSS类
使用classList.add()方法可以为元素添加一个或多个CSS类，如果类已经存在则不会重复添加。
// 获取目标元素
const box = document.querySelector('.box');
// 添加单个CSS类
box.classList.add('active');
// 添加多个CSS类
box.classList.add('highlight', 'border-red');移除CSS类
使用classList.remove()方法可以移除元素的一个或多个CSS类，如果类不存在也不会报错。
// 移除单个CSS类
box.classList.remove('active');
// 移除多个CSS类
box.classList.remove('highlight', 'border-red');切换和判断CSS类
除了添加和移除，classList还提供了切换和判断类是否存在的方法，适合做状态切换场景。
// 切换CSS类，存在则移除，不存在则添加
box.classList.toggle('active');
// 判断元素是否包含某个CSS类，返回布尔值
const hasActive = box.classList.contains('active');
console.log(hasActive);使用className属性操作CSS类
如果需要兼容较老的浏览器，或者需要整体替换元素的类，可以使用className属性，它返回元素所有CSS类组成的字符串。
添加CSS类
添加类时需要先获取原有的类字符串，拼接新的类名后再赋值回去，避免覆盖原有类。
// 获取原有类字符串
const oldClass = box.className;
// 拼接新的类名，注意空格分隔
box.className = oldClass + ' active';
// 更安全的写法，避免重复添加
if (!box.className.includes('active')) {
box.className = box.className + ' active';
}移除CSS类
移除类需要将目标类名从类字符串中替换掉，同时处理多余的空格。
// 移除active类
box.className = box.className.replace('active', '').replace(/\s+/g, ' ').trim();两种方式的对比
可以通过以下表格直观了解两种操作方式的区别：
| 操作方式 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| classList | API简洁，不会重复添加或报错，支持多类操作 | 不支持IE9及以下浏览器 | 现代浏览器项目，常规类操作 |
| className | 兼容性极好，支持所有浏览器 | 操作繁琐，容易覆盖原有类，需要手动处理空格 | 需要兼容老浏览器的项目，整体替换类的场景 |
注意事项
- 操作CSS类时要确保目标元素已经存在于DOM中，否则会获取不到元素导致报错
- 使用classList操作类时，类名不需要带前面的点号，直接写类名字符串即可
- 如果项目中需要兼容IE9及以下浏览器，建议使用className方式或者引入classList的polyfill
JavaScriptCSS类classListaddremove修改时间：2026-06-03 00:33:04