DOM —— classList
2018-03-23 本文已影响8人
DHFE
element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?
Element.classList 是一个只读属性，返回一个元素的类属性的实时集合。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="myDiv" align="align" class="class"></div>
<script>
var div = document.getElementById("myDiv");
console.log(div.classList);
</script>
</body>
</html>
具有方法：
-
add( String [, String] )
添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。
var div = document.getElementById("myDiv");
div.classList.add("class2");
console.log(div.classList);
-
remove( String [,String] )
删除指定的类值。
div.classList.remove("class");
-
item ( Number )
按集合中的索引返回类值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="myDiv" align="align" class="class1 class2 class3"></div>
<script>
var div = document.getElementById("myDiv");
console.log(div.classList.item(0)); // class1
console.log(div.classList.item(1)); // class2
console.log(div.classList.item(2)); // class3
</script>
</body>
</html>
-
toggle ( String [, force] )
当只有一个参数时：切换 class value; 即如果类存在，则删除它并返回false，如果不存在，则添加它并返回true。
当存在第二个参数时：如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它
存在一个参数时：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">[图片上传中...(QQ截图20180323213957.jpg-59005a-1521812402000-0)]
<title>Document</title>
</head>
<body>
<div id="myDiv" align="align" class="class1"></div>
<script>
var div = document.getElementById("myDiv");
div.classList.toggle("class2"); // 由于不存在class2，所以会添加class2
div.classList.toggle("class1"); // 存在class1，删除class1
console.log(div.classList); // class2
</script>
</body>
</html>
存在两个个参数时：
第二个参数为一个表达式，对表达式最终运算结果为true，则添加class，否则删除。
可以预见的是，这个表达式会隐式调用Boolean()方法实现转化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="myDiv" align="align" class="class1"></div>
<script>
var div = document.getElementById("myDiv");
div.classList.toggle("class2","1");
console.log(div.classList); // "1"会隐式转换为布尔类型true，最终添加class2属性。
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="myDiv" align="align" class="class1 class2"></div>
<script>
var condition = "class1" && "class2";
var test = "class1 class2";
var div = document.getElementById("myDiv");
div.classList.toggle("class3",condition);
console.log(div.classList); // 如果同时存在类class1和class2，则添加类class3
</script>
</body>
</html>
contains( String )
检查元素的类属性中是否存在指定的类值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="myDiv" align="align" class="class1 class2"></div>
<script>
var div = document.getElementById("myDiv");
console.log(div.classList.contains("class1")); // true
console.log(div.classList.contains("class1 class2")); // false 不支持多类判定
</script>
</body>
</html>
