classList属性

lewif 发布于2019-08-29 12:25 / 2986人阅读

摘要：为每个元素定义了属性，用于在元素中添加，移除及切换类。该属性是对象一个只读的类数组对象，你可以通过定义的方法对其进行修改。

HTML5为每个元素定义了classLlist属性，用于在元素中添加，移除及切换 CSS 类。该属性是 DOMTokenList 对象（一个只读的类数组对象），你可以通过DOMTokenList定义的方法对其进行修改。

属性：

length：返回类列表中类的数量（只读）

用法：el.classList.length

方法：

.a { color:red }
.b { color:green }
.c { color: yellow }



var el = document.getElementById(div);

add( class1, class2, ...)

在元素中添加一个或多个类名（如果指定的类名已存在，则不会添加）
用法：`el.classList.add("a", "b", "c");`

remove( class1, class2, ...)

删除元素中一个或多个类名
用法：el.classList.remove("a","b");

toggle(class, true|false)

在元素中切换类名
参数1：要移出或者添加的类名
参数2：可选参数，不论类名是否存在，为true时强制添加类名，false时强制删除类名
用法： 添加：el.classList.toggle("d", true);，删除：el.classList.toggle("d", false);

contains( class )

判断指定的类名是否存在
用法：el.classList.contains("e")  ，//返回true

item(index)

根据索引返回类名，索引从 0 开始，如果没有则返回null
用法：el.classList.item(0)  //返回e

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111881.html

JS基础篇--HTML DOM classList 属性

摘要：使用，程序员还可以用它来判断某个节点是否被赋予了某个类。现在是增加现在是删除是否存在类检查是否含有某个类结果是或者。属性返回类列表中类的数量。查看元素有多少个类名获取获取元素的所有类名返回类名在元素中的索引值。页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList，程序员还可以用它来判断某个节点是否被赋...

snowell 2019-08-01 16:17 评论0 收藏0
classList介绍和原生JavaScript实现addClass、removeClass等

摘要：使用可以给元素很方便的添加和删除等操作，现在原生的也可以实现这个方法了。删除指定的类值。所以目前来看，还是无法在实际中放心的使用，只能用于某些特定的项目等。不过我们可以通过一些来实现，或者最下方给出的原生实现。使用jQuery可以给元素很方便的添加class和删除class等操作，现在原生的JavaScript也可以实现这个方法了。使用classList可以方便的添加class、删除...

geekzhou 2019-08-26 18:18 评论0 收藏0
HTML5与类有关的扩充

摘要：与类相关的扩充在开发领域得到广泛采用后导致了一个很大的变化，即属性用得越来越多，一方面可以通过它为元素添加样式，另一方面还可以用它表示元素的语义。在对象上调用始终会返回与类名匹配的所有元素，在元素上调用该方法就只会返回后代元素中匹配的元素。对于传统HTML而言，HTML5是一个叛逆。所有之前的版本对JavaScript接口的描述都不过三言两语，主要篇幅都用于定义标记，与JavaScr...

TwIStOy 2019-08-22 11:10 评论0 收藏0