通过classList原生实现JQuery的addClass、removeClass、hasClass。
案例效果预览
| 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，当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只添加不会被删除。
