javascript Class 处理

jQuery的hasClass、addClass、removeClass,toggleClass很好用,但是现在在vue项目中有时候需要针对页面给body增删class,可以使用classList方法。

length
静态属性。获取元素类名的个数,使用方式:
let length = document.body.classList.length;

item
方法。获取元素的类名,接受一个参数,即数字索引。使用方式:
//如果index超出范围,则返回null
let index = document.body.classList.item(index);

add
方法。用于增加元素的类,接受一个参数,即类名。使用方式:
document.body.classList.add(‘newClass’);
它一次性只能增加一个类,如果需要增加多个类,你只能执行多次add。

remove
方法。用于删除元素的类,接受一个参数,即类名。和add一样,它一次性只能删除一个类。使用方式:
document.body.classList.remove(‘newClass’);

contains
方法。用于检测元素是否包含某个类,返回Boolean值。使用方式:
document.body.classList.contains(‘newClass’); //返回true或者false

toggle
方法。这个家伙是add、remove、contains的三合一版,不仅能检测元素是否包含某个类,而且还具备增删功能,即如果存在某个类,就remove掉,如果不存在,就add一下。返回一个Boolean值。使用方式:
//如果body不存在classtest的类名,就会给body增加一个classtest的类
document.body.classList.toggle(‘classtest’); //true
//再执行一遍,classtest已被删除了
document.body.classList.toggle(‘classtest’); //false

建议使用:

不建议使用以下方法:会直接替换掉body的class而不是增删;