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>

转载于:https://www.cnblogs.com/wei-hj/p/6689945.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值