JavaScript DOM classList

classList

ClassList是一个物件，会返回一个 DOMTokenList，里面包含此元素的类名列表

常见方法:
add():添加一个或多个类，如果此类已经加过就不会再添加
EX:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hi</title>
<style>
.mystyle {
    width: 300px;
    height: 50px;
    background-color: blue;
    color: white;
    font-size: 25px;
}
</style>
</head>
<body>


<button onclick="myFunction()">点击添加 class</button>

<div id="Hi">
Hi!!
</div>
<script>
function myFunction() {
    document.getElementById("Hi").classList.add("mystyle");
}
</script>

</body>
</html>

remove():移除一个或多个类名，但如果此类已被移除也会报错
EX:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hi</title>
<style>
.mystyle {
    width: 300px;
    height: 50px;
    background-color: blue;
    color: white;
    font-size: 25px;
}
</style>
</head>
<body>


<button onclick="myFunction()">点击移除 class</button>

<div id="Hi" class="mystyle">
Hi!!
</div>
<script>
function myFunction() {
    document.getElementById("Hi").classList.remove("mystyle");
}
</script>

</body>
</html>

toggle():切换class，如果此class已经在了，就拿走它；如果还没加上就加上它。
EX:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hi</title>
<style>
.mystyle {
    width: 300px;
    height: 50px;
    background-color: blue;
    color: white;
    font-size: 25px;
}
</style>
</head>
<body>


<button onclick="myFunction()">点击增减 class</button>

<div id="Hi" class="mystyle">
Hi!!
</div>
<script>
function myFunction() {
    document.getElementById("Hi").classList.toggle("mystyle");
}
</script>

</body>
</html>

我们用length属性取用一个ClassList的长度

参考文章:
Runoob HTML DOM classList 属性

<<: Day28：Update the Data and the Featured View

>>: 第28车厢-vw很好用我知道!但不小心就踩雷捏！