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