classList应用

HTML:
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>

JS:

var box = document.querySelectorAll(".box")
// 存在类
console.log(box[1].classList.contains("box"))


// 移除类
box[0].classList.remove("box")



// 添加类
box[0].classList.add("other")



// 如果 box 类值已存在，则移除它，否则添加它
box[0].classList.toggle("box")



// 替换类
box[0].classList.replace("box", "bar");



const cls = ["foo", "bar"];
// 可以添加或移除多个类值！！用逗号隔开。
box[2].classList.add(...cls);
console.log(box[2].classList);



// 使用展开语法添加或移除多个类值
box[3].classList.remove(...cls);
console.log(box[3].classList);