ClassList

方法	功能	示例	说明
.add(className)	添加类	el.classList.add(“active”)	可以一次加多个类
.remove(className)	移除类	el.classList.remove(“hidden”)
.toggle(className)	切换类	el.classList.toggle(“open”)	若存在则移除，否则添加
.replace(old, new)	替换类	el.classList.replace(“on”, “off”)	仅当旧类存在时替换
.contains(className)	检查类是否存在	el.classList.contains(“active”)	返回 true / false

// ======================== 选择目标元素 ========================
// 获取 id 为 "myBtn" 的按钮
const myBtn = document.getElementById("myBtn");
 
// 先为按钮添加一个默认类名
myBtn.classList.add("enabled");
// 也可以用 remove 删除类
// myBtn.classList.remove("enabled");
 
// ======================== toggle example ========================
// 当鼠标移入按钮时
myBtn.addEventListener("mouseover", event => {
  // toggle 表示：如果有 "hover" 类 → 删除；没有 → 添加
  event.target.classList.toggle("hover");
});
// 当鼠标移出按钮时
myBtn.addEventListener("mouseout", event => {
  // 同样切换 "hover" 类，恢复原样
  event.target.classList.toggle("hover");
});
 
// ======================== contains&replace example ========================
myBtn.addEventListener("click", event => {
  // 如果按钮包含 "disabled" 类
  if (event.target.classList.contains("disabled")) {
    // contains() 检查是否拥有该类
    event.target.textContent += "👌"; // 添加表情到按钮文字
  } 
  else {
    // 如果按钮当前是 "enabled"，就替换为 "disabled"
    event.target.classList.replace("enabled", "disabled");
  }
});