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>元素的对象引用
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");
网友评论