js移除class

在JavaScript中，移除元素的class可以通过多种方法实现：

一、使用classList.remove()方法（推荐）

1. 基础概念
   • classList是一个只读属性，它返回一个元素的类属性的实时 DOMTokenList 集合。remove()方法是这个集合的一个方法，用于移除指定的类名。

• 示例代码
  • 假设我们有如下的HTML元素：
  • 假设我们有如下的HTML元素：
  • 在JavaScript中可以这样移除class2：
  • 在JavaScript中可以这样移除class2：
• 优势
  • 简单直观，专门用于操作类名，易于理解和维护。
  • 可以一次性移除多个类名，例如myDiv.classList.remove('class1', 'class3');。
• 应用场景
  • 在响应用户交互时改变元素样式，比如点击按钮移除某个元素的特定样式类。
  • 根据不同的设备屏幕尺寸移除或添加类来调整布局（响应式设计）。

二、通过修改className属性

1. 基础概念
   • className属性返回或设置元素的类属性。可以通过重新设置这个属性来移除类名，但需要处理原有的类名字符串。

• 示例代码
  • 对于上述的HTML元素：
  • 对于上述的HTML元素：
• 劣势
  • 操作相对复杂，尤其是当元素有多个类名时，需要仔细处理字符串。
  • 容易出错，比如可能会意外删除其他类名或者留下空格等问题。
• 应用场景
  • 在一些老旧浏览器（不支持classList的浏览器）中可以使用这种方法来操作类名，但现代开发中如果有兼容性要求可以使用polyfill来让classList在旧浏览器中可用，从而优先使用classList的方法。