javascript - removeAttribute 删除与元素关联的所有其他类

Question

这个问题已经有答案了:

How can I change an element's class with JavaScript? (34 个回答)

已关闭 5 年前。

我正在尝试使用removeAttribute()从元素中删除一个特定类属性。问题是removeAttribute()似乎删除了元素上所有其他定义的类属性。

示例:

HTML

<span id="click">Click</span>
<div id="box" class="blue dotted width-50"></div>

CSS

.blue {
  background-color: blue;
}

.dotted {
  border: thin dotted grey;
}

.width-50 {
  width: 50px;
  height: 50px;
}

JS

var el = document.getElementById('click');
el.addEventListener("click", removeColor, false);


function removeColor() {
    var box = document.getElementById('box');
    box.removeAttribute('class', 'blue');
}

如何才能只从元素中删除一个类属性，而不影响元素上的其他类属性？

http://jsbin.com/xoxodezeze/edit?html,css,js,output

Answer 1

您需要使用

function removeColor() {
    var box = document.getElementById('box');
    box.classList.remove('blue');
}

问题是 removeAttribute()删除完整的属性名称 class所以<div id="box" class="blue dotted width-50"></div>变得像<div id="box" ></div> .

你只想删除这里的类是doc https://developer.mozilla.org/en-US/docs/Web/API/Element/classList