在前端开发中，动态修改DOM元素的类名是非常常见的操作，比如点击按钮切换元素的激活状态、根据数据变化调整元素的样式分类等，都可以通过JavaScript的相关API实现。修改类名的方式主要有两种，分别是操作className属性和使用classList对象，下面分别介绍这两种方式的具体用法。
一、通过className属性修改类名
每个DOM元素都有className属性，该属性对应元素标签上的class属性值，我们可以直接对这个属性进行赋值来修改元素的类名。这种方式会直接覆盖元素原有的所有类名，适合需要完全替换类名的场景。
首先我们需要先获取到目标DOM元素，常用的获取方式有document.getElementById()、document.querySelector()等，下面是具体的代码示例：
// 获取id为target的元素
const targetElement = document.getElementById('target');
// 直接赋值修改类名，会覆盖原有所有类名
targetElement.className = 'new-class active';
// 如果需要保留原有类名，可以拼接原有值
targetElement.className = targetElement.className + ' extra-class';需要注意的是，使用className赋值时如果直接写新类名，会清空元素之前的所有class值，所以如果只是想新增类名，需要先获取原有的className再拼接，避免丢失原有样式。
二、通过classList对象修改类名
现代浏览器都支持元素的classList属性，它是一个DOMTokenList对象，提供了多个便捷的方法来操作元素的类名，不需要手动处理字符串拼接，使用起来更加灵活，是推荐的类名操作方式。
1. 新增类名：add()方法
add()方法可以给元素添加一个或多个类名，如果类名已经存在，不会重复添加。
const targetElement = document.querySelector('.box');
// 添加一个类名
targetElement.classList.add('active');
// 添加多个类名，参数用逗号分隔
targetElement.classList.add('active', 'highlight', 'large');2. 移除类名：remove()方法
remove()方法可以移除元素的一个或多个类名，如果类名不存在，也不会报错。
const targetElement = document.querySelector('.box');
// 移除一个类名
targetElement.classList.remove('active');
// 移除多个类名
targetElement.classList.remove('active', 'highlight');3. 切换类名：toggle()方法
toggle()方法可以切换元素的类名，如果元素已经有该类名就移除，没有就添加，非常适合实现点击切换状态的场景。
const btn = document.getElementById('toggleBtn');
const box = document.querySelector('.box');
btn.addEventListener('click', function() {
// 点击按钮切换box的active类名
box.classList.toggle('active');
});4. 判断类名是否存在：contains()方法
contains()方法可以检查元素是否包含某个类名，返回布尔值，方便做条件判断。
const box = document.querySelector('.box');
// 检查是否包含active类名
if (box.classList.contains('active')) {
console.log('元素处于激活状态');
} else {
console.log('元素未激活');
}两种方式的选择建议
如果只是需要完全替换元素的所有类名，使用className赋值会更简洁；如果需要在原有类名基础上新增、删除、切换单个或多个类名，优先使用classList的相关方法，它能避免手动处理字符串带来的错误，代码可读性和维护性也更好。另外classList的兼容性在现代浏览器中表现良好，如果需要兼容非常老的浏览器，可以搭配className方式做降级处理。
JavaScriptDOM操作classNameclassList元素类名修改修改时间：2026-06-05 02:20:59