原生js利用按钮获取所有盒子的背景颜色

最新推荐文章于 2022-11-04 16:36:21 发布

beyond52013141

最新推荐文章于 2022-11-04 16:36:21 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/beyond52013141/article/details/82497783

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                width: 100px;
                height: 100px;
                border: 1px solid #ddd;
            }
        </style>
    </head>
    <body>
        <button id="btn">按钮</button>
        <div></div>
        <div></div>
        <div></div>
        <script>
            var oDiv = document.getElementsByTagName("div")
            var oBtn = document.getElementById("btn")
            oBtn.onclick = function(){
               for(var i=0;i<oDiv.length;i++){
                    oDiv[i].style.background = 'red'
            }
            }
        </script>
    </body>
</html>

步骤和思路
1先给按钮一个id,盒子给一个《div》标签，2.然后给盒子添加属性样式《style》
3.然后编写原生js代码.
4.var oDiv = document.getElementsByTagName(“div”)(获取所有div)
5.var oBtn = document.getElementById(“btn”)（通过id获取按钮）
6.然后给按钮一个点击事件，oBtn.onclick = function{}
7.最后利用for循环给所有的盒子的背景颜色为红色， for(var i=0;i