原生js操作元素类名(classList,classList.add...)
钱欣然
1、classList
classList属性是一个只读属性，返回元素的类名，作为一个DOMTokenList集合(用于在元素中添加，移除及切换css类)
length:返回类列表中类的数量，该属性是只读的
<style>
.lis {
width: 200px;
height: 100px;
background-color: skyblue;
}
.box {
width: 100px;
height: 100px;
border: 1px solid #e15671;
}
.red {
background: red;
}
.width {
width: 200px;
}
</style>
<body>
<ul>
<li class="lis red width">111</li>
</ul>
<div class="box"></div>
</body>
<script>
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']
</script>
2、classList.add(className1,className2…);
添加一个或多个类名，如果指定的类名存在，则不添加
<style>
.mystyle {
width: 300px;
height: 50px;
background-color: skyblue;
color: white;
font-size: 25px;
}
.once{
padding: 20px;
border: 2px solid orange;
}
</style>
<body>
<button onclick="myFun()">点我</button>
<div id="boss">
我是一个 div
</div>
</body>
<script>
//添加一个类样式
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");
}
</script>
3、classList.contains(className);
判断指定的类名是否存在，返回布尔值(true:存在；false:不存在)
<style>
.lis {
width: 200px;
height: 100px;
background-color: skyblue;
}
.red {
background: red;
}
.width {
width: 200px;
}
</style>
<body>
<ul>
<li class="lis red width">111</li>
</ul>
</body>
<script>
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
</script>
4、classList.item(index);
返回索引值对应的类名 [索引值在区间范围外 返回null]
<style>
.lis {
width: 200px;
height: 100px;
background-color: skyblue;
}
.red {
background: red;
}
.width {
width: 200px;
}
</style>
<body>
<ul>
<li class="lis red width">111</li>
</ul>
</body>
<script>
//第一个类名 根据索引查询
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
</script>
5、classList.remove(className1,className2…);
移除一个或多个类名 [移除不存在的类名，不会报错]
<style>
.mystyle {
width: 300px;
height: 50px;
background-color: skyblue;
color: white;
font-size: 25px;
}
.once{
padding: 20px;
border: 2px solid orange;
}
</style>
<body>
<button onclick="myFun()">点我</button>
<div id="boss" class="mystyle">
我是一个 div
</div>
</body>
<script>
function myFun() {
let box = document.querySelector('#boss');
let list = box.classList.remove("mystyle");
// 移除不存在的类名 不会报错
//let box = document.querySelector('#boss');
//let list = box.classList.remove("once");
}
</script>
6、classList.toggle(className[, true | false]);
切换类名；
第一个参数为要移除的类名，并返回false；若该参数不存在则添加类名，返回true
第二个参数为布尔值，设置是否强制添加或移除类，不论类名是否存在
<style>
.mystyle {
width: 300px;
height: 50px;
background-color: skyblue;
color: white;
font-size: 25px;
}
.box {
width: 100px;
height: 100px;
border: 1px solid #e15671;
}
</style>
<body>
<button onclick="myFun()">点我</button>
<div id="boss" class="mystyle">
我是一个 div
</div>
</body>
<script>
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);
}
</script>
7、classList.replace( oldClassName，newClassName );
替换类名，返回布尔值,true表示替换成功
第一个参数为被替换的类名
第二个参数为要替换的新类名
<style>
.mystyle {
width: 300px;
height: 50px;
background-color: skyblue;
color: white;
font-size: 25px;
}
.box {
width: 100px;
height: 100px;
border: 1px solid #e15671;
}
</style>
<body>
<button onclick="myFun()">点我</button>
<div id="boss" class="mystyle">
我是一个 div
</div>
</body>
<script>
function myFun() {
let box = document.querySelector('#boss');
let replace = box.classList.replace('mystyle','box');
}
</script>
类似资料：