Element:className 通过引用按钮所引用的类实现背景色的更换

最新推荐文章于 2024-03-23 10:41:03 发布

哦~江湖小白

最新推荐文章于 2024-03-23 10:41:03 发布

阅读量728

点赞数

分类专栏： java-script

本文链接：https://blog.csdn.net/mhj0201/article/details/82143025

版权

java-script 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{padding: 0px; margin: 0px;}
            #container{width: 300px;height: 200px;margin: 20px auto;}
            #change{width:250px;height: 150px;margin-left: 25px;margin-bottom: 10px;border: 1px solid palegoldenrod;}
            #all input{width: 40px; height: 20px;margin-left: 10px;margin-left: 25px;}
            .red{background-color: red;}
            .blue{background-color: blue; }
            .palegreen{background-color: palegreen;}
            .palevioletred{background-color:palevioletred;}
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var change=document.getElementById("change");
                var btn_arr=document.getElementById("all").getElementsByTagName("input");
                for(var i=0;i<btn_arr.length;i++){
                    btn_arr[i].onclick=function(){
                        change.className=this.className;//引用按钮所引用的类
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id="container">
            <div id="change">

            </div>
            <div id="all">
                <input type="button" class="red" />
                <input type="button" class="blue" />
                <input type="button" class="palegreen"/>
                <input type="button" class="palevioletred"/>
            </div>
        </div>
    </body>
</html>

通过点击按钮实现背景色的改变

哦~江湖小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Element:className 通过引用按钮所引用的类实现背景色的更换

&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; *{padding: 0px; margin: 0px;}
复制链接

扫一扫