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