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的意思是什么的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

html5实践-使用css装饰图片画廊的代码分享(二)

如何使用css设计出一个表单页面(附示例)

css 外边距合并是什么意思

css页面加载失败的原因有哪些

css边距怎么设置

css怎么消除默认样式

css border-right-color属性怎么用

css怎么设置文本框的宽和高

p的css初始属性是什么

css不生效是什么原因

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




打赏

取消

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

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

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

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

评论

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