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>
时间: 2024-10-27 05:02:05

classList的相关文章

HTML DOM classList 属性

页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类. 添加类(add) document.getElementById("myDIV").classList.add("mystyle"); 为 <div> 元素添加多个类: document.getElementById("myDIV").cla

山寨HTML5API classList类

preface 觉得自己去写一些类,你真的会找到自己不足的地方.其实厉害不是你实现一个类,而是你如何去设计一个类,能让开发者更加容易操作.对于这个操作样式,可以通过javascript访问style,可是在<javascript高级程序设计>中有讲到这样子CSS.javascript.HTML耦合度太高,不太适合维护:还有就是通过className,但是我们知道className是一个可以被开发者读写的字符串,如果要增删查改元素对应的className的话,可以实现,但是比较麻烦.这个时候HT

classLIST元素增删改查方法

window.onload=function () { var oDiv=document.getElementsByTagName('div')[0]; var oInP=document.getElementsByTagName('input')[0]; var aDiv=new classList(oDiv); oInP.onclick=function(){ aDiv.add('ha'); alert(oDiv.className); }}/*如果e有classList属性则返回它,否则

用javascript的classList代替jquery的class操作

javascript的className操作方法比较难受,他获取的是一个连续的字符串 必须要用split拆分开,好多人因此想去用jquery的addClass,removeClass,hasClass等等 classList解决了这个问题,虽然兼容性并不算好.但会更好的,我们先学习一下 HTMLElement都会有classList属性, 主要方法有如下: el.classList.add() el.classList.remove() el.classList.contain() el.cla

[Javascript] Manipulate the DOM with the classList API

Learn how to add, remove and test for CSS classes using the classList API. It's more powerful than using className and doesn't require any dependencies. https://gist.run/embed.html?id=9feda23aeb6ddd1b47e33f38e1518aaa

HTML5新特性:元素的classList属性与应用

在html5新增的classList之前, 操作元素的class用的是className这个属性,而如果要向jquery封装的hasClass, removeClass, addClass, toggleClass一样优雅的操作calssName, 在以前我们要对className封装处理,如下, 下面的代码你未必能看得懂运行流程,但应该能看懂功能部分,这几段函数是取自我录制的一套视频中,讲解DOM框架封装的一部分 gQuery.prototype.hasClass = function (ob

classList属性

1.传统方法: 在操作类名的时候,需要通过className属性添加.删除和替换类名.如下面例子: ? 1 <div class="bd user disabled">...</div> 这个div中一共有三个类名,要从中删掉一个类名,需要把这三个类分别拆开,然后进行处理,处理过程如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script type="text/javascript">      

classList详解,让你的js方便地操作DOM类

在此之前,jQuery的hasClass.addClass.removeClass我们已经再熟悉不过了,然而我们并不会在每一个项目中都会去使用 jQuery或者Zepto,譬如在移动端的网页中,考虑到传说中的性能和静态资源的请求量等因素,我们通常会选择采用原生js,而对于元素的class 操作.你首先想到的就是className,这位伙计完美地得到了包括ie6在内的所有古现代浏览器的支持,尽管它的功能简直弱爆,但是人们在相当长的一 段时间还是用得不亦乐乎,甚至一些基础库也只是通过classNam

HTML5实战与剖析之classList属性

classList属性究竟是干什么的,我们先撇下classList不管.我们考虑这么一个问题,那就是我们如何将拥有多个类名的元素中的其中一个类名删除呢?梦龙较劲脑汁儿终于想到一个实现的方法.将拥有类名li.meng和long,三个类名中的类名meng删除.代码如下 HTML代码 view source print? 1.<div class="li meng long">梦龙小站</div> JavaScript代码 view source print? 01.

javascript高级程序设计---classList属性

1.传统方法: 在操作类名的时候,需要通过className属性添加.删除和替换类名.如下面例子: <div class="bd user disabled">...</div> 这个div中一共有三个类名,要从中删掉一个类名,需要把这三个类分别拆开,然后进行处理,处理过程如下: <script type="text/javascript"> var className=div.className.split(/\s+/); //