JS 点击事件onclick：点击对象小区域颜色，大区域颜色改变

最新推荐文章于 2023-04-04 17:31:11 发布

幻之舞

最新推荐文章于 2023-04-04 17:31:11 发布

阅读量2.7k

点赞数

分类专栏： JS-事件文章标签： JS html

本文链接：https://blog.csdn.net/hzw7150/article/details/81561326

版权

JS-事件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0px;padding: 0px;border-collapse:collapse;}
            #firtsdiv{width: 400px;height: 100px;border: 1px solid green;}
            #firtsdiv>div{width: 400px;height: 50px;border: 1px solid blue;}
            .span>span{width: 90px;height: 30px;float: right;margin: 5px;}
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var spans=document.getElementsByTagName("span");
                for (var i=0;i<spans.length;i++) {
                    spans[i].onclick=function(){
                        document.getElementById("showdiv").style.backgroundColor=this.style.background;
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id="firtsdiv">
            <div id="showdiv"></div>
            <div class="span">
                <span style="background:black;"></span>
                <span style="background: blue;"></span>
                <span style="background: blueviolet;"></span>
                <span style="background: red;"></span>
            </div>
        </div>
    </body>
</html>