原生与html5怎么交互,HTML5如果与类交互

HTML5如果与类交互

时间：2014-6-19

随着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');