关于classList的一点记录

最新推荐文章于 2025-02-28 21:29:49 发布

Shirley_linxiaojia

最新推荐文章于 2025-02-28 21:29:49 发布

阅读量1k

点赞数

分类专栏：前端文章标签： classList

本文链接：https://blog.csdn.net/Shirley_linxiaojia/article/details/79863742

版权

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用classList属性来高效地添加、删除和检查HTML元素的CSS类。通过实例展示了classList的各种方法，如add(), remove(), toggle()等，并解释了它们的工作原理。

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

如果现在要判断元素的某个class是否存在，在以前的时候，要用正则表达式做匹配，代码上可能比较麻烦一些，闲杂用classList，方便了很多！

MDN上classList的定义

classList 属性返回元素的类名，作为 DOMTokenList 对象。

该属性用于在元素中添加，移除及切换 CSS 类。

classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。

<div class="div1 div2 div3" id="div">test</div>
<script>
    var list=document.getElementById('div');
    console.log(list.classList);
</script>

结果如下：

DOMTokenList(3) ["div1", "div2", "div3", value: "div1 div2 div3"]
1. 0:"div1"
2. 1:"div2"
3. 2:"div3"
4. length:3
5. value:"div1 div2 div3"
6. __proto__:DOMTokenList

classList的一些API：

document.body.classList.length;//静态属性。获取元素类名的个数

document.body.classList.add('class_a，class_b,class_c');//方法。用于添加元素的类(class_a)，接受多个参数，

document.body.classList.remove('class_a');//方法。用于删除元素的类（class_a），接受多个参数。和add一样

document.body.classList.contains('class_a'); //返回true或者false  方法。用于检测元素是否包含某个类（class_a），返回Boolean值。



//toggle
//方法。这个家伙是add、remove、contains的结合，不仅能检测元素是否包含某个类，而且还具备增删功能，即如果存在某个类，
// 就remove掉，如果不存在，就add一下。返回一个Boolean值。

//如果body不存在 class_a 的类名，就会给body增加一个 class_a 的类

document.body.classList.toggle('class_a'); //true

//再执行一遍，class_a已被删除了

document.body.classList.toggle('class_a'); //false