在本章节介绍classList属性。
classList属性是一个只读的属性,它会返回一组HTML元素class属性值。它可以用于操作class属性列表。使用classList属性可以很便捷的访问元素的class属性值,这些class属性值通过className获得并使用空格分割。
一个DOMTokenList表示一个元素的class属性值的内容。如果一个元素的class属性为空或没有设置,它会返回一个空的DOMTokenList,而且它的length属性会变为0。
尽管classList属性它本身是一个只读属性,但是你可以使用DOMTokenList的函数来操作classList,这些函数有:add(),remove(),replace()和toggle()。
你可以测试一个元素是否包含给定的class属性,通过使用classList.contains()函数。
html代码:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
head>
<body>
<script src="./main.js">script>
body>
html>
javascript代码:
//使用DOM创建一个div元素
const div = window.document.createElement("div");
//给一个div元素添加一个class属性
div.className = "container";
console.log(div);
输出:
<div class="container">div>
虽然classList属性是只读的,但是你可以通过DOMTokenList接口提供的API来操作class属性。
3.1 向一个元素中添加一个class属性:
//使用DOM创建一个div元素
const div = window.document.createElement("div");
//给一个div元素添加一个class属性
div.className = "container";
//给div元素在末尾添加一个class属性
div.classList.add("");
console.log(div.outerHTML);
输出:
<div class="container "></div>
3.2 向一个元素中移除一个class属性:
//删除一个class属性值
div.classList.remove("");
console.log(div.outerHTML);
输出:
<div class="container"></div>
3.3 toggle()
//toggle() 如果设置了指定的class属性名,则删除它,否则新建一个。
div.classList.toggle("❤️");
var i = 5;
//如果第二个参数的值为true则添加一个class属性,否则不添加。
div.classList.toggle("", i < 10);
console.log(div.outerHTML);
输出:
<div class="container ❤️ "></div>
3.4 判断一个元素的class属性是否包含指定的class
var con = div.classList.contains("");
console.log(con);
输出:
false
3.5 替换一个元素的class属性
//使用属性""替换掉""
div.classList.replace("", "");
console.log(div.outerHTML);
输出:
<div class="container ❤️ "></div>
3.6 批量添加和删除class属性
div.classList.add("", "", "");
div.classList.remove("", "");
console.log(div.outerHTML);
输出:
<div class="container ❤️ "></div>