JS+H5新標簽classList。刪除添加class

經常要兼容不得不用老方法，總要還下新方法來嘗試的

直接上代碼：

window.onload = function() {
    var abox = document.querySelectorAll(".sub");
    for (var i = 0; i < abox.length; i++) {
        abox[i].onclick = function() {
            for (var i = 0; i < abox.length; i++) {
                abox[i].classList.remove('active')
            }
            this.classList.add("active");
        }
    }
}

 

簡單說明：

div.classList.add("active");

div.classList.remove("active");

div.classList.length 有幾個class名字

div.classList.item[0] 獲取下標

div.classList.contains("class名") 查看是否存在這個名字 存在是 true 不存在是 false

 

如果存在就移除：

var x = document.getElementById("myDIV");
if (x.classList.contains("mystyle")) {
    x.classList.remove("anotherClass");
} else {
    alert("Could not find it.");
}