前言

这篇文章主要给大家分享的是JavaScript用html5新方法操作元素类名的详解，早先JavaScript处理起来特别不方便，需要先取到class属性，然后对字符串进行处理。现在html5给所有元素增加了classList属性来操作类属性，非常方便，下面就一起来看看具体操作过程吧

目录

早先JavaScript处理起来特别不方便，需要先取到class属性，然后对字符串进行处理。

现在html5给所有元素增加了classList属性来操作类属性，非常方便。

1、classList属性

先看如下代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<ul class="nav">

<li class="active">栏目1</li>

<li>栏目2</li>

<li>栏目3</li>

</ul>

<script type="text/javascript">

// 获取到当前的li元素

let activeLi = document.querySelector(".active");

// 打印classList属性

console.log(activeLi.classList)

// 控制台输出：

// DOMTokenList ['active', value: 'active']

</script>

控制台查看效果：

classList属性类型：

classList属性是 DOMTokenList 类型，可以通过add、contains、remove等方法对类属性进行操作。

add(value) 新增加一个类名。
contains(value) 是否包含类名。
remove(value) 删除类名。
toggle(value) 如果类名存在则删除，否则添加。

2、实务应用

实务中，栏目是切换是很常用的一个应用。接上面的例子，当点击栏目时将 active 移动到对应的栏目

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<ul class="nav">

<li class="item active">栏目1</li>

<li class="item">栏目2</li>

<li class="item">栏目3</li>

</ul>

<script type="text/javascript">

let currentElement = document.querySelector(".nav").firstElementChild;

// 遍历li元素设置点击事件

while (currentElement) {

currentElement.onclick = function() {

// 移除激活li的active

document.querySelector(".active").classList.remove("active");

// 当前li类增加active

this.classList.add("active");

}

currentElement = currentElement.nextElementSibling;

}

</script>

这样实现起来就很方便了，不用影响到其他类名。

JavaScript利用html5新方法操作元素类名详解

前言

目录

1、classList属性

2、实务应用

全站热榜

创作者周榜