JavaScript 可以使用 HTML DOM Element 为 HTML Element 删除 CSS class， Javascript删除CSS样式可以使用 Element 的 classList 和 className 两个属性实现。

JavaScript删除CSS样式使用 Element.classList 和 Element.className 的区别：

  • Element.classList 使用其方法 remove() 删除CSS class，它一次只能添加一个类 class，删除多个CSS样式类需要多次调用其 remove() 方法。
  • Element.className 是直接赋值为空串，直接使用JavaScript删除所有CSS样式类。

使用classList实现JS删除CSS样式

以下实例分别展示为一个元素使用 classList 实现JavaScript删除CSS样式类和为多个元素使用 classList 实现JavaScript删除CSS样式类。

单元素使用classList实现JS删除CSS样式类

  • 使用 document.getElementById() 获取元素，使用 classList 删除多个 class 需要多次调用 document.classList.remove()：
el = document.getElementById('#aTable');
el.classList.remove('table-bordered');
el.classList.remove('table-hover');

  注意如下方法添加 CSS class 的方式是不正确的，因为 remove() 方法不支持一次删除多个类：

el = getElementById('#el_id');
el.classList.remove('table-bordered table-hover');  // 这添加方法不正确，无法实现JavaScript删除CSS样式类
  • 使用 document.querySelector() ：

  在使用该方法时，如果存在多个匹配到元素，该方法返回第一个匹配到的元素。

el = document.querySelector('.table');
el.classList.remove('table-bordered');
el.classList.remove('table-hover');

多元素使用classList实现JS删除CSS样式类

使用 document.querySelector() 和 querySelectorAll(() ，然后使用 Array 的 forEach() 函数循环为每一个元素删除CSS样式类

var markdown = document.querySelector('.markdown');
  markdown.querySelectorAll('.table').forEach((item) => {
    item.classList.remove('table-bordered');
        item.classList.remove('table-hover');
    item.firstElementChild.classList.remove('table-light');
  });

使用className实现JS删除CSS样式类

以下实例分别展示为一个元素使用 className 实现JavaScript删除CSS样式类和为多个元素使用 classList 实现JavaScript删除CSS样式类

单元素使用className实现JS删除CSS样式类

  • 使用 document.getElementById()：
el = document.getElementById('#aTable');
el.className = '';
  • 使用 document.querySelector() ：

  在使用该方法时，如果存在多个匹配到元素，该方法返回第一个匹配到的元素。

el = document.querySelector('.table');
el.className = '';

多元素使用className实现JS删除CSS样式类

使用 document.querySelector() 和 querySelectorAll(() ，然后使用 Array 的 forEach() 函数循环为每一个元素删除CS样式类

var markdown = document.querySelector('.markdown');
markdown.querySelectorAll('.table').forEach((item) => {
    item.className = '';
  });