原生js操作元素类名(classList,classList.add...)

2024-07-10 22:22| 来源: 网络整理| 查看: 265

1、classList

classList属性是一个只读属性，返回元素的类名，作为一个DOMTokenList集合(用于在元素中添加，移除及切换css类)

length:返回类列表中类的数量，该属性是只读的

.lis { width: 200px; height: 100px; background-color: skyblue; } .box { width: 100px; height: 100px; border: 1px solid #e15671; } .red { background: red; } .width { width: 200px; } 111 let box = document.querySelector('.box'); let list = box.classList; console.log(list.length);//1 console.log(list);//DOMTokenList ['box', value: 'box'] let lists = document.querySelector(".lis"); let len = lists.classList; console.info(len.length);//3 console.info(len);//DOMTokenList(3) ['lis', 'red', 'width', value: 'lis red width'] 2、classList.add(className1,className2…);

添加一个或多个类名，如果指定的类名存在，则不添加

.mystyle { width: 300px; height: 50px; background-color: skyblue; color: white; font-size: 25px; } .once{ padding: 20px; border: 2px solid orange; } 点我我是一个 div //添加一个类样式 function myFun() { let divCla = document.getElementById("boss"); let style = divCla.classList.add("mystyle"); } //添加两个及两个以上类样式类名用逗号','隔开 function myFun() { let divCla = document.getElementById("boss"); let style = divCla.classList.add("mystyle","once"); } 3、classList.contains(className);

判断指定的类名是否存在，返回布尔值(true:存在；false:不存在)

.lis { width: 200px; height: 100px; background-color: skyblue; } .red { background: red; } .width { width: 200px; } 111 let lis = document.getElementsByClassName("lis")[0]; let style = lis.classList.contains('red'); console.log(style);//true 存在类名 let style1 = lis.classList.contains('height'); console.log(style1);//false 4、classList.item(index);

返回索引值对应的类名 [索引值在区间范围外返回null]

.lis { width: 200px; height: 100px; background-color: skyblue; } .red { background: red; } .width { width: 200px; } 111 //第一个类名根据索引查询 let lis = document.getElementsByClassName("lis")[0]; let className = lis.classList.item(0); console.log(className);//lis //第二个类名 let className2 = lis.classList.item(1); console.log(className2);//red 5、classList.remove(className1,className2…);

移除一个或多个类名 [移除不存在的类名，不会报错]

.mystyle { width: 300px; height: 50px; background-color: skyblue; color: white; font-size: 25px; } .once{ padding: 20px; border: 2px solid orange; } 点我我是一个 div function myFun() { let box = document.querySelector('#boss'); let list = box.classList.remove("mystyle"); // 移除不存在的类名不会报错 //let box = document.querySelector('#boss'); //let list = box.classList.remove("once"); } 6、classList.toggle(className[, true | false]);

切换类名；

第一个参数为要移除的类名，并返回false；若该参数不存在则添加类名，返回true

第二个参数为布尔值，设置是否强制添加或移除类，不论类名是否存在

.mystyle { width: 300px; height: 50px; background-color: skyblue; color: white; font-size: 25px; } .box { width: 100px; height: 100px; border: 1px solid #e15671; } 点我我是一个 div function myFun() { //添加类名 let box = document.querySelector('#boss'); let list = box.classList.toggle("box"); //给两个值的时候 //移除类名 let removeList = box.classList.toggle('mystyle',false); //添加类名 let addList = box.classList.toggle('box',true); } 7、classList.replace( oldClassName，newClassName );

替换类名，返回布尔值,true表示替换成功

第一个参数为被替换的类名

第二个参数为要替换的新类名

【本文地址】

公司简介

联系我们