<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>用循环将三个DIV变成红色</title> <style type="text/css"> #outer{width:330px;height:100px;margin:10px auto;} #outer div{float:left;width:100px;height:100px;margin:0 5px;background:black;} </style> </head> <body> <center> <button>点击将div变成红色</button> </center> <div id="outer"> <div></div> <div></div> <div></div> </div> <script type="text/javascript"> window.onload = function(){ var button = document.getElementsByTagName("button")[0]; var divs = document.getElementsByTagName("div"); var size = divs.length; button.onclick = function(){ for(var i=1;i<size;i++){ divs[i].style.backgroundColor = "red"; } }; } </script> </body> </html>