Question

我正在尝试使用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');
}

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

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

removeAttribute删除与element关联的所有其他类

1 个答案: