css中的classlist的意思是什么


本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。

classList属性返回元素的类名,作为DOMTokenList对象,该属性用于在元素中添加,移除及切换CSS类。classList属性是只读的,但你可以使用add()和remove()方法修改它。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

classList 属性返回元素的类名,作为 DOMTokenList 对象。

该属性用于在元素中添加,移除及切换 CSS 类。

classList 属性是只读的,但你可以使用 add() 和 remove() 方法修改它。

语法

1

element.classList

SSGQ2E{TZ[}$E4$[BWE[`NQ.png

方法

H~J{]U9S]K)N20V5$JINZ1Z.png

实例:

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

38

39

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>document</title>

<style>

.mystyle {

    width: 500px;

    height: 50px;

    padding: 15px;

    border: 1px solid black;

}

.anotherClass {

    background-color: coral;

    color: white;

}

.thirdClass {

    text-transform: uppercase;

    text-align: center;

    font-size: 25px;

}

</style>

</head>

<body>

 

<p>点击按钮为 DIV 元素添加多个类。</p>

<button onclick="myFunction()">点我</button>

<p><strong>注意:</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 classList 属性。</p>

<div id="myDIV">

我是一个 DIV 元素。

</div>

<script>

function myFunction() {

    document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

}

</script>

 

</body>

</html>

效果:

GIF.gif

推荐学习:css视频教程

以上就是css中的classlist的意思是什么的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css怎么定义div的宽度和高度

css如何让div居中?css实现div居中的方法

css链接状态有哪些

css实现页面底部固定的方法介绍(附代码)

css代码如何居中

css如何禁止滚动条

css vw是什么单位

css清除浮动的方法有哪些

如何利用css生成可控虚线

css如何超出显示滚动条

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...