登录
原创

DOM的classList属性

发布于 2020-10-12 阅读 134
  • JavaScript
  • DOM
原创

定义和用法

classList 属性返回元素的类名,作为 DOMTokenList 对象,该属性可用户元素类的添加、移除、切换等, classList属性为只读,但可以使用add()和remove()方法修改。

image.png

属性与方法

1、 length 返回类列表中类的数量
2、 add(class1, class2, ...) 在元素中添加一个或多个类
3、 remove(class1, class2, ...) 在元素中删除一个或多个类
4、 contains(class) 返回true或false,判断是否存在某个类
5、 item(index) 返回元素中索引值对应的类名。索引值从 0 开始,如果索引值在区间范围外则返回 null
6、 toggle(ckass, true|false) 在元素中切换类型,第一个参数为要在元素中移除的类名,并返回 false,如果该类名不存在则会在元素中添加类名,并返回 true,第二个是可选参数,是个布尔值用于设置元素是否强制添加或移除类,不管该类名是否存在
7、 replace(class1, class2) 顾名思义,把元素中的类class1替换成class2

例子

const div = document.createElement('div');

div.classList.add("foo", "bar", "thirdClass");  //为元素添加多个类

div.classList.length; //查看有多少个类名

div.classList.remove("foo", "bar");  //移除多个类

div.classList.toggle("visible");  //存在visible则删除,不存在则增加visible

console.log(div.classList.contains("foo"));  //判断是否存在foo

console.log(div.classList.item(0));  //获取第一个类名

//操作多个类
const cls = ["foo", "bar"];
div.classList.add(...cls); 
div.classList.remove(...cls); 


评论区

励志做一条安静的咸鱼,从此走上人生巅峰。

1

0

1