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

用this.classname而不是this.style.className.您的Javascript代码将如下所示:

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

小提琴.

Answer 3

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>