classlist.toggle 用于切换单个 css 类名，自动判断增删并返回布尔值；支持第二个布尔参数强制控制；不接受空格或数组，多类需分别调用。

classList.toggle 是 JavaScript 中操作元素 CSS 类名最常用的方法之一，它能自动判断某个类名是否已存在，不存在就添加，存在就移除——也就是“切换”状态。

基本用法：单个类名的切换

调用方式很简单：

element.classList.toggle('active');

这行代码会检查 element 是否含有 active 类：

• 如果有，就把它移除；
• 如果没有，就添加进去。

它返回一个布尔值：true 表示操作后该类存在（即本次是添加），false 表示操作后该类不存在（即本次是移除）。这个返回值可用于条件逻辑，比如：

if (btn.classList.toggle('pressed')) {
  playSound();
}

进阶用法：带条件参数的强制切换

toggle 还支持第二个可选参数，是个布尔值，用于**跳过自动判断，直接按指令执行**：

element.classList.toggle('hidden', isVisible);

意思是：“如果 isVisible 为 false，就确保 hidden 存在；如果为 true，就确保它被移除”。等价于：

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

• isVisible === false → 强制添加 hidden；
• isVisible === true → 强制移除 hidden。

适合配合状态变量做精准控制，避免重复判断。

注意点：类名必须是字符串，不支持空格或多个类

toggle 每次只处理一个类名：

• ✅ 正确：el.classList.toggle('btn-primary')；
• ❌ 错误：el.classList.toggle('btn btn-primary')（含空格会被当作一个类名，实际不存在）；
• ❌ 错误：el.classList.toggle(['a', 'b'])（不接受数组，要用 add() 或 remove() 批量操作）。

若需同时切换多个类，应分别调用或封装成函数。

和 classList.contains 配合使用更清晰？其实没必要

有人习惯先用 contains 判断再手动 add/remove，但这样写冗余且易出错：

// 不推荐
if (el.classList.contains('error')) {
  el.classList.remove('error');
} else {
  el.classList.add('error');
}

完全可以用一行替代：

el.classList.toggle('error');

语义更明确，代码更简洁，浏览器也做了底层优化。

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