原生js操作class的方式

liliy__

于 2020-04-14 13:10:00 发布

阅读量610

点赞数 2

CC 4.0 BY-SA版权

分类专栏： js基础文章标签： javascript

本文链接：https://blog.csdn.net/liliy__/article/details/105509781

js基础专栏收录该内容

5 篇文章

订阅专栏

本文介绍了原生JavaScript中操作class的方法，包括使用className一次性覆盖所有class，以及使用classList进行增删切换class的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生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"); // 切换类名,有则删除,无则添加

– 以上代码的结果
在这里插入图片描述