如果现在要判断元素的某个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>结果如下:
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