• 技术文章 >web前端 >css教程

    css中的classlist的意思是什么

    醉折花枝作酒筹醉折花枝作酒筹2021-07-14 11:04:44原创4612

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

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

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

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

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

    语法

    element.classList

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

    方法

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

    实例:

    <!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的意思是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css classlist
    上一篇:css基线是什么 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 网页设计css样式特效代码大全(建议收藏)• css3跟css区别是什么• css3中的rem怎么用• css中浮动是什么意思• css基线是什么
    1/1

    PHP中文网