学习前端的菜鸡对JS 的classList理解

classList

在早期的时候要添加，删除类 需要用className去获取，然后通过正则表达式去判断这个类是否存在。

代码上去会有点麻烦，现在有了classList 就方便了很多。

————————————————————————————————————————————————————

定义和用法

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

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

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

 

 

var len = 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


更多详细请参照 : http://www.runoob.com/jsref/prop-element-classlist.html

ps: 推荐一个学习前端的文档网站（HTML CSS JS） MDN: https://developer.mozilla.org/zh-CN

转载于:https://www.cnblogs.com/zhg277245485/p/6557530.html