(共566篇)
全部分类

获取和修改元素class属性
[ JS基础 ] 

获取和修改元素的 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>

案例源码