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

javascript html css

2022-08-29 22:35:43

任何人都可以让我知道如何仅使用JavaScript删除元素上的类吗？请不要用jQuery给我一个答案，因为我不能使用它，而且我对它一无所知。

答案 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

答案 2

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

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

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

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