HTML5如果与类交互

随着classlist对象的引入,javascript也使元素类名称交互变得更容易,dom中的第个元素都一个相关classlist,即一个应用于这个元素的所有类的列表.要想获得一个元素的classlist并将其存录到控制台,则需要执行以下代码:
var el=document.queryselector('.foo');
console.log(el.classlist)
classlist对象包含一系列操纵类的属性和类函数,用户可以用contains查询一个类存在与否,如果存在,那么这类函数返回true,否则返回false.用户可以使用add娄函数添加一个类,并使用remove移除一个类,下面的代码测试了类名称foo;如果它不存在,则添加它,如果存在,则移除它:
if(el.classlist.contains('foo'))
{el.classlist.remove('foo');
}else{
el.classlist.add('foo');
}
另一种更快速的方法是使用toggle类函数,toggle在一个类存在时移除它,并在它不存在时添加它.
el.classlist.toggle('foo');