classList属性返回元素的类名。该属性用于在元素中添加、移除及切换CSS类。classList属性是只读的,但可以使用add()和remove()方法修改它。length属性返回类别中的数量。
方法
方法 | 描述 |
---|---|
add(class1, class2, ...) | 在元素中添加一个或多个类名。 如果指定的类名已存在,则不会添加 |
contains(class) | 返回布尔值,判断指定的类名是否存在。 可能值:
|
item(index) | 返回元素中索引值对应的类名。索引值从 0 开始。 如果索引值在区间范围外则返回 null |
remove(class1, class2, ...) | 移除元素中一个或多个类名。 注意: 移除不存在的类名,不会报错。 |
toggle(class, true|false) | 在元素中切换类名。
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-widthh, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="show()">show</button>
<div id="pq" class="aa ss dd ff hh"></div>
<script>
function show() {
var dome = document.querySelector("#pq");
alert(dome.classList); //获取class列表
dome.classList.add("gg");
//相当于jQuery的==>addClass()
dome.classList.remove("aa");
//相当于jQuery的==>removeClass()
alert(dome.classList.contains("bb"));
//相当于jQuery的==>hasClass()
alert(dome.classList.toggle("pp"));
alert(dome.classList);
}
</script>
</body>
</html>
首次点击show
再次点击show()