本文摘自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的意思是什么的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
html5实践-使用css装饰图片画廊的代码分享(二)
如何使用css设计出一个表单页面(附示例)
css 外边距合并是什么意思
css页面加载失败的原因有哪些
css边距怎么设置
css怎么消除默认样式
css border-right-color属性怎么用
css怎么设置文本框的宽和高
p的css初始属性是什么
css不生效是什么原因
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css中的classlist的意思是什么