原生js操作class的方式

原生js操作class的方式

• className – 会覆盖掉所有的class

<div class="box">这里是内容</div>

var div = document.querySelector(".box");
div.className = "box1";

– 以上代码的结果 box1覆盖了原来的box

• classLIst – 在原来的基础上增、减、切换

<div class="box box1 box2">这里是内容</div>

var div = document.querySelector(".box");
div.classList.add("box123"); // 在原来的基础上添加类名
div.classList.remove("box1"); // 删除类名
div.classList.toggle("box456"); // 切换类名,有则删除,无则添加

– 以上代码的结果