Element.classList

作者: wanpan__ | 来源:发表于2017-09-24 15:52 被阅读0次

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

    相关文章

      网友评论

        本文标题:Element.classList

        本文链接:https://www.haomeiwen.com/subject/uxwkextx.html