CSS笔记 - fgm练习 - 三个div变色 - CSS div等分布局

最新推荐文章于 2021-12-14 14:50:53 发布

转载最新推荐文章于 2021-12-14 14:50:53 发布 · 153 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/carpenterzoe/p/10234177.html

本文介绍了一种使用JavaScript和CSS实现网页上三个div元素颜色统一改变的方法。通过按钮触发事件，利用for循环遍历所有div元素并修改其背景色属性，从而实现一键变色的效果。代码中还涉及了flex布局的使用，使div元素在页面上均匀排列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <title>三个div变红</title>
    <style>
    *{margin: 0; padding: 0}
    body{
        text-align: center;
    }
    #outer{
        width: 330px;
        display: flex;
        margin: 0 auto;
    }
    #outer div{
        height: 100px;
        background-color: black;
        flex:1;
        margin: 5px;
        /* 平分3个div的方法，实例答案如下：
        #outer{width:330px;height:100px;margin:10px auto;}
        #outer div{float:left;width:100px;height:100px;margin:0 5px;background:black;}

        ！！！flex布局还不了解！！！
         */
        }
    button{
        margin-top: 10px;
        margin-bottom: 5px;
        /* 行内元素怎么设置居中？  除了给上级元素text-align: center;以外？ */

    }
    </style>

    <script>
    window.onload = function()
    {
        var oBtn = document.getElementsByTagName('button')[0];
        var oDiv = document.getElementById('outer');
        var aDiv = oDiv.getElementsByTagName('div');

        // var oDiv = document.getElementById("outer").getElementsByTagName("div");
        // 获取元素的方法：连写。

        oBtn.onclick = function()
        {
            for(var i=0; i<aDiv.length; i++)
            {
                aDiv[i].style.backgroundColor = 'red';
            }
        };
    };
    </script>
</head>
<body>
<button>点击div全部变色</button>
<div id="outer">
    <div></div>
    <div></div>
    <div></div>
</div>
</body>

转载于:https://www.cnblogs.com/carpenterzoe/p/10234177.html