js用循环将三个Div变成红色

    xiaoxiao2022-07-12  136

    编程目的:点击按钮将三个div变成红色 

    <!DOCTYPE html> <html> <head> <title>用循环将三个Div变成红色</title> <style type="text/css"> *{ margin: 0px; padding: 0px; text-align: center; } #app4{ width: 336px; height: 162px; position: relative; margin: 0 auto; } #app4 button{ width: 150px; height: 30px; position: absolute; top: 15px; left: 93px; cursor: pointer; } #app4 div{ width: 100px; height: 100px; float: left; background: black; top: 50px; position: relative; border: 6px solid #ffffff;} </style> </head> <body> <div id="app4"> <button>点击将div改变成红的</button> <div></div> <div></div> <div></div> </div> <script type="text/javascript"> // 判断状态 var judge = false; window.onload = function(){ // 获取元素 var changeColorBtn = document.getElementById("app4").getElementsByTagName("button")[0]; var colorDiv = document.getElementById("app4").getElementsByTagName("div"); // 执行点击事件 changeColorBtn.onclick = function(){ // 遍历div for(var i = 0; i < colorDiv.length; i++){ if(!judge){ // 进行更改操作 colorDiv[i].style.backgroundColor = "red"; this.innerHTML = "点击将div改变成黑的"; } if(judge){ colorDiv[i].style.backgroundColor = "black"; this.innerHTML = "点击将div改变成红的"; } } judge = !judge; } } </script> </body> </html>

                                           效果图:

                                                

    最新回复(0)