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

 

 

    <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>

 

posted @ 2019-01-07 16:46  CarpenterZoe  阅读(358)  评论(0)    收藏  举报