Js 从元素中删除所有类

Question

我有一个按钮，当我单击它时，我想删除所有课程。这就是我到目前为止所尝试过的：

button.style.className = ''

document.querySelector('button').onclick = function() {
  this.style.className = '';
}

.myClass {

  color:red;
  
}

.second {

  color:green;
}

<button class="myClass second">click me</button>

现在我无法使用 classList.remove 因为我不知道类名，它们是动态的。

如何从元素中删除所有类？

Answer 1

不要从

className

对象访问

style

，直接访问它就像

this.className

document.querySelector('button').onclick = function() {
  this.className = '';
}

.myClass {

  color:red;
  
}

.second {

  color:green;
}

<button id="button" class="myClass second">click me</button>

Answer 2

HTML DOM

removeAttribute()

方法：

document.querySelector('button').onclick = function() {
  this.removeAttribute("class");
}

.myClass {
  background-color:red;
}

.second {
  box-shadow: 0px 0px 10px 10px;
}

<button id="button" class="myClass second">click me</button>

Answer 3

使用

this.classname

而不是

this.style.className

。你的 Javascript 代码将是这样的：

document.querySelector('button').onclick = function() {
    this.className = ''; //remove the .style
}

小提琴。

Answer 4

您可以删除（.style），之后一切正常。

 button.className = '';

或者你可以使用

this.className = "";

两者都工作正常。

Answer 5

我用：

document.getElementById('theElementToMakeClassless').classList = null;

可能设置为

null

而不是其他选项会产生长期影响，但我还没有在 FireFox、DuckDuckGo 浏览器、Safari 或 Chrome 中看到任何效果。