JavaScript中className与classList区别及切换类名失效问题求助

核心差异 #

• className：字符串类型，对应元素完整的class属性值，直接赋值会覆盖所有原有类名，增删类需要手动拆分、拼接字符串处理
• classList：DOMTokenList类型的类数组对象，内置toggle()、add()、remove()、contains()等专用类操作方法，仅修改目标类名，不会影响其他已存在的类

你用className失效的原因 #

你的按钮默认带btnJerome基础样式类，如果你直接赋值btn.className = 'active'，会直接把btnJerome类覆盖掉，按钮基础样式丢失，自然看起来功能不生效。

用className实现类切换的正确代码 #

function toggleBtn() {
  // 拆分原有类名，过滤空字符避免空格导致的判断异常
  let clsList = btn.className.split(' ').filter(item => item.trim() !== '')
  if (clsList.includes('active')) {
    // 存在active类则移除
    clsList = clsList.filter(cls => cls !== 'active')
  } else {
    // 不存在则新增active类
    clsList.push('active')
  }
  btn.className = clsList.join(' ')
}

补充说明 #

classList的API已经封装了类名空格、重复类等边界情况的处理，日常开发优先使用classList操作类名，代码更简洁也更不容易出问题。

内容的提问来源于stack exchange，提问作者jerome richard A R