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

    css中的classlist的意思是什么

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

    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中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css classlist
    上一篇:css基线是什么 下一篇:css3和less的区别是什么
    VIP会员

    相关文章推荐

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

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网