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的主要内容，如果未能解决你的问题，请参考以下文章