使用 JavaScript 从元素中删除 CSS 类（无 jQuery）

Question

谁能让我知道如何仅使用 JavaScript 删除元素上的类？

请不要用 jQuery 给我答案，因为我不能使用它，而且我对此一无所知。

原文由 Amra 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 1

正确和标准的方法是使用 classList 。它现在 在大多数现代浏览器的最新版本中得到广泛支持：

 ELEMENT.classList.remove("CLASS_NAME");

 remove.onclick = () => {
 const el = document.querySelector('#el');
 el.classList.remove("red");
 }

 .red {
 background: red
 }

 <div id='el' class="red"> Test</div>
 <button id='remove'>Remove Class</button>

文档： https ://developer.mozilla.org/en/DOM/element.classList

原文由 Paul Rouget 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

document.getElementById("MyID").className =
    document.getElementById("MyID").className.replace(/\bMyClass\b/,'');

其中 MyID 是元素的 ID，MyClass 是您要删除的类的名称。

---

更新： 要支持包含短划线字符的类名，例如“My-Class”，请使用

document.getElementById("MyID").className =
  document.getElementById("MyID").className
    .replace(new RegExp('(?:^|\\s)'+ 'My-Class' + '(?:\\s|$)'), ' ');

原文由 ЯegDwight 发布，翻译遵循 CC BY-SA 3.0 许可协议