zoukankan      html  css  js  c++  java
  • H5新增属性classList

    H5新增属性classList

    h5中新增了一个classList,原生js可以通过它来判断获取dom节点有无某个class。

    classList是html元素对象的成员,它的使用非常简单,比如

        console.log(document.body.classList);
    

    目前已知classList API有length,item,add,remove,toggle,contains

    length

    静态属性。可以获取元素类名的个数,使用方式:

        var len = document.body.classList.length;
    

    item( Number )

    方法。可以获取元素的类名,接受一个参数,即数字索引。使用方式:

        //如果index超出范围,则返回null
        var cls = document.body.classList.item(index); 
    

    add( String [, String] )

    方法。可以给元素添加类名,就像jquery中的addClass()。使用方式:

        document.body.classList.add('myclass');
        //遗憾的是,它一次性只能增加一个类,比如以下方式将会报错
        //document.body.classList.add('class1 class2');
    

    remove( String [,String] )

    方法。可以将元素的类名删除,就像jquery中的removeClass()。和add()方法一样,一次只能删除一个类名。使用方式:

        document.body.classList.remove('myclass');
    

    toggle( String [, force] )

    方法。可以给元素交替增加类名和删除类名,就像jquery中的toggleClass()。

    当只有一个参数时:切换 class value,即如果类存在,则删除它并返回false,如果不存在,则添加它并返回true。

    当存在第二个参数时:如果第二个参数的计算结果为true,则添加指定的类值,如果计算结果为false,则删除它。

    使用方式:

        document.body.classList.toggle('myclass');
    

    contains( String )

    方法。可以检测判断元素是否包含某个类名,返回false或true。使用方式:

        document.body.classList.contains('myclass'); //返回true或者false
    

    示例

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

    H5在移动端的兼容性相对来说已经很不错,在不用jquery的时候,使用H5的新属性,可以省下不少功夫的

    另外判断dom节点有无某个class的方法可以通过getAttribute()这个方法。即

            <html>
            <head>
            </head>
            <body>
                <div>
                    <p>1</p>
                    <p class="test">2</p>
                    <p>3</p>
                </div>
                <script>
                var p = document.getElementsByTagName('p');
                    for(var i = 0;i <p.length;i++){
                    //方法一
                        if(p[i].className=='test'){
                            console.log(p[i].innerHTML)
                        }
                    //方法二,用getAttribute()这个方法
                        //if(p[i].getAttribute("class")=='test'){
                        //console.log(p[i].innerHTML);
                        //}
                    }
                </script>
            </body>
            </html>
  • 相关阅读:
    军火库(第一期):无线电硬件安全大牛都用哪些利器?
    AMD64与IA64的区别
    win7安装apache或者php 5.7缺少vcruntime140.dll的问题
    DrawText
    Delphi与C语言类型转换对照
    chm文件打开空白无内容的解决办法
    在ubuntu 15.04下安装VMware Tools
    Vmware怎样使用nat和桥接方式解决虚拟机联网问题
    Ubuntu 14.04/14.10下安装VMware Workstation 11图文教程
    Ubuntu 16.04 安装 VMware-Workstation-12
  • 原文地址:https://www.cnblogs.com/wei-hj/p/6689945.html
Copyright © 2011-2022 走看看