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

最新推荐文章于 2022-12-04 22:53:18 发布

kelokole

最新推荐文章于 2022-12-04 22:53:18 发布

阅读量905

点赞数 1

本文链接：https://blog.csdn.net/qq_44254672/article/details/90483469

版权

编程目的：点击按钮将三个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>

效果图：

kelokole

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js用循环将三个Div变成红色

编程目的：点击按钮将三个div变成红色<!DOCTYPE html><html> <head> <title>用循环将三个Div变成红色</title> <style type="text/css"> *{ margin: 0px; padding: 0...
复制链接

扫一扫