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.setAtrribute()方法
這個方法與className是一致的，但是操作是使用的是 'class' 這個名稱
<div class="center">我是div</div>
<script>
var div = document.querySelector('div')
//給class屬性賦值
div.setAttribute('class','center redFont')
</script>
執行結果：
<div class="center redFont">我是div</div>
3.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>
4.classList 屬性方法
- add()方法：添加類名
已經存在的類名不會重復添加
<body>
<div class="center">我是div</div>
</body>
<script>
var div = document.querySelector("div")
div.classList.add("redFont")
console.log(div.className) //center redFont
// 添加重復的類名
div.classList.add("center")
console.log(div.className) //center redFont
</script>
- remove()方法：移除某個類名
<body>
<div class="center redFont">我是div</div>
</body>
<script>
var div = document.querySelector("div")
div.classList.remove("redFont")
console.log(div.className) //center
</script>
- toggle()方法：切換某個類名
如果這個類名已經存在就把他移除，如果類名不存在則添加這個類名
<body>
<div class="center">我是div</div>
</body>
<script>
var div = document.querySelector("div")
// 不存在這個類名則添加
div.classList.toggle("redFont")
console.log(div.className) //center redFont
// 存在這個類名則移除
div.classList.toggle("redFont")
console.log(div.className) //center
</script>
- contains()方法：判斷元素是否含有指定的css類名
<body>
<div class="center">我是div</div>
</body>
<script>
var div = document.querySelector("div")
console.log(div.classList.contains("center")) //true
console.log(div.classList.contains("redFont")) //false
</script>