1.className 属性
直接对这个属性赋值可以添加 /修改类名
缺点：新的赋值会覆盖掉前面的值，即使保留之前的值基础上添加也无法保证没有重复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<style>
.center{
text-align: center;
}
.redFont{
color:red;
}
</style>
</head>
<body>
<div>我是div1</div>
<div class="redFont">我是div2</div>
<div class="redFont">我是div3</div>
<div class="center">我是div4</div>
</body>
</html>
<script>
var divs = document.querySelectorAll("div")
// 添加类名
divs[0].className = "redFont"
// 移除所有类名
divs[1].className = ""
// 在原有基础上添加类名 非重复
divs[2].className += " center"
// 在原有基础上添加类名 重复
divs[3].className += " center"
</script>运行结果：（无法自动处理那些重复的值，如果要移除某一个类，那更加麻烦，要进行大量的逻辑判断，很不好处理）
以下代码和上面的结果是一样的，列出来仅供参考
<script>
var divs = document.querySelectorAll("div")
// 为class属性添加类名
divs[0].setAttribute("class","redFont")
// 移除class属性
divs[1].removeAttribute("class")
// 在原有基础上添加类名 非重复
var d2_val = divs[2].getAttribute("class") + " center"
divs[2].setAttribute("class",d2_val)
// 在原有基础上添加类名 重复
var d3_val = divs[3].getAttribute("class") + " center"
divs[3].setAttribute("class",d3_val)
</script>2.classList 属性
这个属性返回元素css类名的列表
注意：这个是HTML5里面新增的属性，旧版本浏览器不支持。
这个属性存在的意义就是解决className属性添加/移除新的类名遇到的问题，它把已经存在的类名用数组的形式管理起来，方便移除和添加。所以直接对这个元素赋值是没有意义的。
这个属性是为了方便以数组的形式添加/移除类名，具体的看后面的相关方法
<body>
<div class="center redFont">我是div</div>
</body>
<script>
var div = document.querySelector("div")
console.log(div.classList) // ?["center", "redFont", value: "center redFont"]
// 直接修改classList属性语法上可以，但是没有实际意义
div.classList = "test test2"
console.log(div.classList) // ["test", "test2", value: "test test2"]
</script>运行结果：
<div class="test test2">我是div</div>原文地址：https://www.cnblogs.com/OrochiZ-/p/11601106.html
时间： 2024-10-17 22:50:56