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

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

每一次的记录,都是向前迈进的一步
目录
相关文章
nodeValue 属性
`nodeValue`属性用于获取节点的值。在元素节点中,它返回`undefined`;对于文本节点,它返回文本内容;在属性节点中,它返回属性的值。示例代码获取元素的第一个属性值。
nodeValue 属性
`nodeValue`属性用于获取节点的值。在元素节点中,它返回`undefined`;在文本节点中,返回文本内容;在属性节点中,返回属性值。例如,代码用于获取元素的第一个子节点的`nodeValue`。
|
6月前
element-Cascader级联选择器用法?
element-Cascader级联选择器用法?
|
JavaScript
element plus 获取标签节点内的值
element plus 获取标签节点内的值
231 0
|
数据格式
Element el-cascader 级联选择器详解
本文目录 1. 概述 2. 数据绑定 2.1 默认数据绑定 2.2 指定绑定数据格式 3. 常用功能 3.1 修改触发方式 3.2 增加清空按钮 3.3 可搜索 3.4 选中项只显示最后一级 3.5 可选中任意一级 3.6 面板样式 3.7 自定义节点内容 4. 动态加载下级 5. 小结
3356 0
|
JavaScript
jquery 使用attr方法对checkBox进行全选和反选操作
一次点击按钮进行全选的时候,checkbox全部选中;再次点击的时候,checkbox取消选中。 第二次,第三次,之后再点击,没有效果,代码也执行。checkbox的checked属性也改变,但是checkbox就是没有 被选中。问题解决办法是把红色部分中的attr方法修改
132 0
|
JavaScript
DOM对象中的常用属性(innerHTML属性,innerText属性,className属性,style属性)
DOM对象中的常用属性(innerHTML属性,innerText属性,className属性,style属性)
DOM对象中的常用属性(innerHTML属性,innerText属性,className属性,style属性)
|
JavaScript API
Day21 - innerText、 nodeValue与 textContent的区别
Day21 - innerText、 nodeValue与 textContent的区别
195 0
textContent、innerText、innerHTML属性
textContent、innerText、innerHTML属性
145 0