classList.add()方法可为元素添加一个或多个类名，自动去重；支持多参数字符串传入，不可传null/undefined；常用于状态添加，切换场景推荐toggle()或replace()。

直接调用 classList.add() 方法即可为元素添加一个或多个类名，它会自动避免重复添加已存在的类。

基础用法：添加单个类名

获取 DOM 元素后，调用其 classList.add() 并传入字符串形式的类名：

const box = document.getElementById('myBox');
box.classList.add('active');

执行后，<div id="myBox"> 的 class 属性会变成 <code>class="active"（如果原本无 class）或追加到现有类中，如 class="box active"。

一次添加多个类名

支持传入多个字符串参数，一次性添加多个类，无需多次调用：

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

立即学习“Java免费学习笔记（深入）”；

box.classList.add('visible', 'highlight', 'fade-in');

结果是 class 中同时存在这三个类，顺序按传入顺序排列，且自动去重 —— 即使其中某个类已存在，也不会报错或重复。

注意点和常见场景

• 只能传入字符串，不能传变量不加引号（box.classList.add(myClass) 可以，但 box.classList.add(myClass) 中 myClass 必须是字符串值）
• 不支持传入空字符串、null 或 undefined，否则会报错 Failed to execute 'add' on 'DOMTokenList'
• 适合与条件逻辑配合，比如点击切换状态：button.addEventListener('click', () => btn.classList.add('pressed'))
• 若需先移除再添加（即“切换”效果），更推荐用 classList.toggle() 或 classList.replace()（较新 API）