最推荐、最安全的方式是使用 classlist api。它提供 add、remove、toggle、contains 等方法操作单个类，支持多参数和数组展开，replace 可替换类，兼容 ie10+，避免 classname 字符串操作的错误风险。

在 JavaScript 中修改节点的 class 类名，最推荐、最安全的方式是使用元素的 classList API，而不是直接操作 className 属性。它能避免字符串拼接错误、重复添加、误删其他类等问题。

用 classList 添加、删除、切换单个类名

classList 提供了语义清晰的方法：

• element.classList.add("active")：添加一个类（已存在则忽略）
• element.classList.remove("hidden")：删除一个类（不存在也不报错）
• element.classList.toggle("selected")：有则删，无则加
• element.classList.contains("disabled")：判断是否含有某个类，返回布尔值

一次性操作多个类名

支持传入多个参数，也支持数组展开：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• element.classList.add("btn", "btn-primary", "is-loading")
• element.classList.remove("old-class", "deprecated")
• element.classList.add(...["a", "b", "c"]) // ES6 展开语法

替换类名或重置整个 class 列表

如果需要彻底替换所有类，可以用 className 属性（注意：会覆盖全部原有类）：

• element.className = "new-class only-one"
• 更稳妥的做法是先清空再添加：element.className = ""; 然后用 classList.add()
• 若需“替换某一个旧类为新类”，推荐组合使用：element.classList.replace("old", "new")（现代浏览器支持，IE 不支持）

兼容性与注意事项

classList 在 IE10+ 及所有现代浏览器中可用。如需支持 IE9 及以下，可引入轻量 polyfill，或改用 className 字符串操作（不推荐，易出错）：

• 避免直接写 el.className += " new-class" —— 会导致开头多空格、重复添加、无法去重
• 不要用 el.className = el.className.replace(...) 手动处理，逻辑复杂且边界情况多
• 优先使用 classList，它是专为这类操作设计的标准接口

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南