removeAttribute刪除與元素相關聯的所有其他類

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'); 
} 

我如何才能移除元素的一個類屬性，而不影響元素上的其他類屬性？

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

Answer 1

您需要使用

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

的問題是removeAttribute()刪除完整的屬性名稱class SO <div id="box" class="blue dotted width-50"></div> becomse像<div id="box" ></div>。

你只是想刪除這裏的文件是文件 https://developer.mozilla.org/en-US/docs/Web/API/Element/classList