classList属性详解

简介: 之前我们要操作一个DOM元素的class属性,需要对这个DOM的class进行繁琐的循环判断,而现在HTML5为每个元素定义了classLlist属性,用于在元素中添加,移除及切换 CSS 类。该属性是 DOMTokenList 对象(一个只读的类数组对象),你可以通过DOMTokenList定义的方法对其进行修改。

之前我们要操作一个DOM元素的class属性,需要对这个DOM的class进行繁琐的循环判断,而现在HTML5为每个元素定义了classLlist属性,用于在元素中添加,移除及切换 CSS 类。该属性是 DOMTokenList 对象(一个只读的类数组对象),你可以通过DOMTokenList定义的方法对其进行修改。

支持classList属性的浏览器版本:

语法:element.classList

方法:

add(class1, class2, ...): 在元素中添加一个或多个类名, 如果指定的类名已存在,则不会添加

contains(class): 返回布尔值,判断指定的类名是否存在

item(index): 返回类名在元素中的索引值, 索引值从 0 开始, 如果索引值在区间范围外则返回 null

remove(class1, class2, ...): 移除元素中一个或多个类名, 注意: 移除不存在的类名,不会报错

toggle(class, true|false): 在元素中切换类名

           第一个参数为要在元素中移除的类名,并返回 false。如果该类名不存在则会在元素中添加类名,并返回 true

           第二个是可选参数,是个布尔值用于设置元素是否强制添加或移除类,不管该类名是否存在

每一次的记录,都是向前迈进的一步
目录
相关文章
|
9天前
|
存储 编译器 C#
|
JavaScript 前端开发
添加新属性
添加新属性
61 0
关于Navisworks属性查看的问题(属性不显示)
关于Navisworks属性查看的问题(属性不显示)
关于Navisworks属性查看的问题(属性不显示)
|
编译器
字段是字段,属性是属性,字段不是属性,属性看getter或setter
字段是字段,属性是属性,字段不是属性,属性看getter或setter
102 0
字段是字段,属性是属性,字段不是属性,属性看getter或setter
|
JSON JavaScript 前端开发
18、属性描述对象
JavaScript 提供了一个内部数据结构,用来描述对象的属性,控制它的行为,比如该属性是否可写、可遍历等等。这个内部数据结构称为“属性描述对象”(attributes object)。
122 0
|
XML 存储 JSON
C#中的属性
C#中的属性
147 0
|
Python
类的属性总结
[root@blackfox zhouyuyao]# cat c7.py  #!/usr/bin/python #coding:utf8 var5 = "全局变量var5" class MyClass(object):     var1 = '类的公有属性 var1'   ...
744 0
Java反射得到属性和属性的值和设置属性的值
Java反射得到属性和属性的值和设置属性的值