• 技术文章 >web前端 >前端问答

    javascript怎么改变ul的class

    长期闲置长期闲置2022-03-31 16:48:54原创113

    方法:1、利用“document.getElementsByTagName("ul")”获取ul对象;2、利用className属性改变ul的class,该属性可设置元素的class,语法为“ul对象.className=新的class”。

    本教程操作环境:windows10系统、javascript1.8.5版、Dell G3电脑。

    javascript怎么改变ul的class

    className 属性设置或返回元素的 class 属性。

    语法如下:

    获取属性值:

    HTMLElementObject.className

    设置属性值:

    HTMLElementObject.className=classname

    示例如下:

    一个简单的无序列表,点击button之前ul的样式为uhh1

    点击button后,调用check函数中的className将ul的样式由uhh1改为uhh2

    <style type="text/css">
                .uhh1{color:#CCCCCC;font-size:12px;}
                .uhh2{color:#FF6600;font-size:24px;}
            </style>
            <script>
            function check()
            {
                var uul = document.getElementsByTagName("ul")[0];
                uul.className = "uhh2";
            }
            </script>
        </head>
        <body>
            <ul class="uhh1">
                <li><a href="#">首 页</a></li>
                <li><a href="#">新闻快讯</a></li>
                <li><a href="#">产品信息</a></li>
                <li><a href="#">联系我们</a></li>
                <br />
                <button onclick="check()">click me</button>
                
            </ul>
        </body>

    输出结果:

    14.png

    【相关推荐:javascript视频教程web前端

    以上就是javascript怎么改变ul的class的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:javascript
    上一篇:es6中let和const的区别是什么 下一篇:es6中import的用法是什么
    Web大前端开发直播班

    相关文章推荐

    • javascript有求余函数吗• JavaScript变量中能有空格吗• javascript怎么判断字符串相不相等• javascript的自定义函数有哪些• javascript怎么保留两位小数(不四舍五入)

    全部评论我要评论

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

    PHP中文网