获取和修改元素的 class 属性
在元素的标签属性中class属于特殊情况，不能通过这个属性获取元素的类名，要通过element.className或者element.classList来获取：
1
2
3
4
5
6
7
|
<h1 id="logo" title="logo title" class="logo1 logo2 logo3">h1 element</h1>
<script>
var h1 = document.querySelector("h1");
console.log("h1.className: ", h1.className);
console.log("h1.classList: ", h1.classList);
</script>
|
案例源码
element.classList
通过element.classList的返回值可以随意操作元素的class属性值。返回值拥有add()/remove()/toggle()方法：
| 方法 |
作用 |
element.classList.add(name) |
给元素添加类名 |
element.classList.remove(name) |
删除已有类名 |
element.classList.toggle(name) |
如果已有该类名，就删除该类名，否则添加该类名 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<h1>h1 element</h1>
<script>
var h1 = document.querySelector("h1");
console.log("h1.className: ", h1.className);
h1.classList.add("logo");
console.log("h1.className: ", h1.className);
h1.classList.remove("logo");
console.log("h1.className: ", h1.className);
h1.classList.toggle("logo");
console.log("h1.className: ", h1.className);
h1.classList.toggle("logo");
console.log("h1.className: ", h1.className);
h1.classList.toggle("logo");
console.log("h1.className: ", h1.className);
</script>
|
案例源码
