javascript中推荐使用classlist操作类名，它比classname更安全语义化；支持add()添加、remove()删除、toggle()切换、contains()判断、replace()替换类名。

JavaScript 中通过 classList 操作类名是最推荐、最简洁的方式，它比直接操作 className 更安全、更语义化，也避免了字符串拼接出错或重复添加的问题。

添加一个或多个类名（add）

使用 add() 方法可以向元素添加一个或多个类名，已存在的类不会重复添加，也不会影响其他类：

const btn = document.querySelector('.btn');
btn.classList.add('active');                    // 添加单个类
btn.classList.add('highlight', 'animated');     // 添加多个类（支持多个参数）

移除一个或多个类名（remove）

remove() 用于删除指定类名，不存在的类会被忽略，不影响其他类：

Alibabacloud Sdk Client Initialization For Java

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

下载

btn.classList.remove('active');
btn.classList.remove('highlight', 'animated');

切换类名（toggle）

toggle() 是最常用的操作之一：有则删，无则加。还可传入第二个布尔参数强制设置状态：

• btn.classList.toggle('disabled') —— 切换 disabled 类
• btn.classList.toggle('hidden', true) —— 强制添加 hidden
• btn.classList.toggle('hidden', false) —— 强制移除 hidden

判断是否含有某个类（contains）与替换类名（replace）

contains() 返回布尔值，适合做条件判断；replace() 可以把旧类替换成新类（需注意兼容性，IE 不支持）：

if (btn.classList.contains('active')) {
  btn.classList.replace('active', 'inactive');
}

如需兼容老浏览器，可用 remove() + add() 组合替代 replace()。

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