本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。
classList属性返回元素的类名,作为DOMTokenList对象,该属性用于在元素中添加,移除及切换CSS类。classList属性是只读的,但你可以使用add()和remove()方法修改它。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
classList 属性返回元素的类名,作为 DOMTokenList 对象。
该属性用于在元素中添加,移除及切换 CSS 类。
classList 属性是只读的,但你可以使用 add() 和 remove() 方法修改它。
语法
方法
实例:
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 >
|
效果:
推荐学习:css视频教程
以上就是css中的classlist的意思是什么的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css怎么定义div的宽度和高度
css如何让div居中?css实现div居中的方法
css链接状态有哪些
css实现页面底部固定的方法介绍(附代码)
css代码如何居中
css如何禁止滚动条
css vw是什么单位
css清除浮动的方法有哪些
如何利用css生成可控虚线
css如何超出显示滚动条
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css中的classlist的意思是什么