学习classList写的小Demo

来源：互联网发布：newsql数据库有哪些编辑：程序博客网时间：2024/06/06 13:23

Element.classList 是一个只读属性，返回一个 DOMTokenList，其中包含元素所有现有的 class 属性。

使用 classList 要比 element.className 方便不少，后者是一个用空格分隔的字符串。

语法

var elementClasses = elementNodeReference.classList;

elementClasses 是一个 DOMTokenList ，代表 elementNodeReference 的 class 属性。如果没有 class 属性或为空，则 elementClasses.length 返回 0。element.classList 本身是只读的，但可以使用 add() 和 remove() 方法修改它。

常用方法

add( String [, String] )添加给定的 class 。元素已有的 class 会被忽略。remove( String [,String] )移除给定的 class 。item ( Number )根据索引位置，返回 class 值。toggle ( String [, force] )仅传一个参数时：切换 class 属性。亦即，当该 class 存在时移除并返回 false，否则增加该 class 并返回 true。传入第二个参数时：若第二个参数为 true 则增加该 class，若为 false 则移除。contains( String )检查元素是否拥有给定的 class。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script>        var i = 3;            var onLoadFunct = function() {                var div = document.getElementById("div");                // div 是一个 <div> 元素的对象引用，拥有 class="foo bar"                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"); //添加多个 class            }        </script>    </head>    <body onload="onLoadFunct()">        <div id='div' class="foo bar"></div>    </body></html>

参考

classList API

0 0