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

＆＃13;

＆＃13;

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

＆＃13;

.myClass {

  color:red;
  
}

.second {

  color:green;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用this.classname代替this.style.className。您的Javascript代码将如下所示：

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

Fiddle

Answer 3

HTML DOM removeAttribute()方法：

＆＃13;

＆＃13;

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

＆＃13;

.myClass {
  background-color:red;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

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

 button.className = '';

或者您可以使用this.className = "";

都可以。