Element.classList

H5新增了一种操作类名的方法,classList,这个属性是新集合类型DOMTokenList的实例。
Element.classList 是一个只读属性,返回一个元素的类属性的实时 DOMTokenList
集合。
使用 **classList **是一个方便的替代方法,通过element.className
作为空格分隔的字符串访问元素的类列表。

方法

  • add( String [, String] )
    添加指定的类值。如果这些类已经存在于元素的属性中,那么它们将被忽略。
  • remove( String [,String] )
    删除指定的类值。
  • item ( Number )
    按集合中的索引返回类值。
  • toggle ( String [, force] )
    当只有一个参数时:切换 class value; 即如果类存在,则删除它并返回false,如果不存在,则添加它并返回true。
    当存在第二个参数时:如果第二个参数的计算结果为true,则添加指定的类值,如果计算结果为false,则删除它
  • contains( String )
    检查元素的类属性中是否存在指定的类值。

示例

// div是具有class =“foo bar”的
元素的对象引用 div.classList.remove("foo"); div.classList.add("anotherclass"); // 如果visible被设置则删除它,否则添加它 div.classList.toggle("visible"); // 添加/删除 visible,取决于测试条件,i小于10 div.classList.toggle("visible", i < 10); alert(div.classList.contains("foo")); //添加或删除多个类 div.classList.add("foo","bar"); div.classList.remove("foo", "bar");

你可能感兴趣的:(Element.classList)