classList

Posted Nicole

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了classList相关的知识,希望对你有一定的参考价值。

新H5中DOM对象多了一个classList属性,是一个数组
  • add 添加一个新的类名
  • remove 删除一个的类名
  • contains 判断是否包含一个指定的类名
  • toggle 切换一个class element.toggle(‘class-name‘,[add_or_remove])
  • toggle函数的第二个参数true为添加 false删除
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class-list</title>
    <link rel="stylesheet" href="bootstrap.min.css"/>
</head>
<body>
<header class="container">
    <h1 class="page-header">Element.classList</h1>
    </header>
    <div class="container">
        <nav class="navbar navbar-default">
            <a href="#" class="navbar-brand">Itcast</a>
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </nav>
    </div>
<script>
    var liElements = document.querySelectorAll(.nav > li);
    //alert(liElement.length);
    for(var i=0; i<liElements.length; i++){
        liElements[i].addEventListener(mouseover,function(e){
            for(var i=0; i<liElements.length;i++){
                liElements.item(i).classList.remove(active);
            }
            this.classList.add(active);
            e.stopPropagation();//阻止冒泡,该方法将停止事件的传播,阻止它被分派到其他 Document 节点
            e.preventDefault();//方法阻止元素发生默认的行为
        })
    }
</script>
</body>
</html>

以上是关于classList的主要内容,如果未能解决你的问题,请参考以下文章