通過classList原生實現(xiàn)JQuery的addClass、removeClass口芍、hasClass箍铲。
案例效果預(yù)覽
| JQery | JS-classList |
|---|---|
| hasClass(token) | classList.contains(token) |
| addClass(token) | classList.add(token) |
| removeClass(token) | classList.remove(token) |
| classList.toggle(token) |
Element.classList 是一個只讀屬性，返回一個元素的類屬性的實時 DOMTokenList集合鬓椭。但是你可以使用add和remove方法修改它颠猴。
瀏覽器兼容性
classList有add、contains小染、entries翘瓮、forEach、item裤翩、keys资盅、remove、replace踊赠、supports呵扛、toggle、values11種方法
add()
添加一個或者多個token筐带。
語法：tokenList.add(token1[, token2[, ...tokenN]]);
<span class="a b c"></span>
// js
let span = document.querySelector("span");
let classes = span.classList;
classes.add("d");
span.textContent = classes;
// 輸出 a b c d
contains()
如果包含該toekn择份，則返回true，否則返回false烫堤。
語法：tokenList.contains(token);
<span class="a b c"></span>
// js
let span = document.querySelector("span");
let classes = span.classList;
let result = classes.contains("c");
if (result) {
span.textContent = "The classList contains 'c'";
} else {
span.textContent = "The classList does not contain 'c'";
}
// 輸出 The classList contains 'c'
remove()
從列表中刪除一個或者多個token荣赶。
語法：tokenList.remove(token1[, token2[, ...tokenN]]);
<div id="ab" class="a b c"></div>
<div id="a" class="a b c"></div>
// js
let span = document.getElementById("ab");
let classes = span.classList;
classes.remove("c");
span.textContent = classes;
let span2 = document.getElementById("a")
let classes2 = span2.classList;
classes2.remove("c", "b");
span2.textContent = classes2;
// a b
// a
replace()
語法：tokenList.replace(oldToken, newToken);
PS：oldToken被替換的token，newToken用于替換oldToekn的鸽斟。返回值為Boolean拔创，若成功替換返回true，否則返回false富蓄，當(dāng)oldToken不存在時會返回false剩燥。在較舊瀏覽器中，replace()會返回void。
<span class="a b c"></span>
// js
let span = document.querySelector("span");
let classes = span.classList;
let result = classes.replace("c", "z");
console.log(result);
if (result) {
span.textContent = classes;
} else {
span.textContent = 'token not replaced successfully';
}
// a b z
toggle()
若該token存在灭红，從DOMTokenList中刪除指定的token侣滩，并返回false。若該token不存在变擒，則會添加指定token君珠，并返回true。
語法：tokenList.toggle(token [, force]);
PS：force為Boolean值娇斑，表示輪流切換到單向策添，false則token將僅刪除而不添加，true則token只添加不會被刪除毫缆。
