<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{330px;height:100px;margin:10px auto;} #outer div{float:left;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>