JavaScript背景变色小案列-CFANZ编程社区

今天是六一儿童节，阳光明媚，鸟语花香，看着孩子们天真无邪的笑容，不禁心生感慨!赞曰：

快乐的时光总是短暂的，嘻嘻嘻。

上次写的那一篇英雄联盟轮播图逻辑，写起来麻烦又繁琐，还容易出bug（画面感油然而生），有人反馈有没有一种高效，省时、省力以提高效率的写法呢？事实证明有。今天通过这篇背景变色小案列，进阶一下。
英雄联盟轮播图逻辑

背景变色小案列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景变色</title>
    <style>
        div{
            width: 300px;
            height: 380px;
            background-color:purple;
            margin: 30px;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>   
    <script>

   var div1=document.getElementById("div1") 
   var div2=document.getElementById("div2")
   var div3=document.getElementById("div3")

    点击事件onclick
     div1.onclick=function(){
     div1.style.backgroundColor="red"
     }

    div2.onclick=function(){
    div2.style.backgroundColor="blue"
    
 }

    div3.onclick=function(){
         div3.style.backgroundColor="green"
     }
    for(var n=1;n<4;n++){
         //1,2,3
         var divn=document.getElementById("divn")
     }

   var x=100
  // console.log(x)

   var yx=20
  //console.log(y)
  document.getElementByTagName()
 //在文档中通过标签名称找到对应的元素，放入数组中
 var divs=document.getElementsByTagName("div")
 //console.log(divs)

     for(var n=0;n<divs.length;n++){
     // console.log(divs[n])
     divs[n].onclick=function(){
     //console.log(1)

但点击第一个div  n=0 divs[0]
//console.log(n)
this对象：this指向   发送事件的元素  事件源
//console.log(this) 
this.style.backgroundColor="skyblue"
        
       }
       
     }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景变色</title>
    <style>
        div{
            width: 300px;
            height: 380px;
            background-color:purple;
            margin: 30px;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>   
    <script>
    //点击对应div时，让其背景颜色改为红色
    //通过 id找到对应的元素
    // var div1=document.getElementById("div1") 
    // var div2=document.getElementById("div2")
    // var div3=document.getElementById("div3")
    // //点击事件onclick
    // div1.οnclick=function(){
    //     div1.style.backgroundColor="red"
    // }   

    // div2.οnclick=function(){
    //     div2.style.backgroundColor="blue"
    // }
    
    // div3.οnclick=function(){
    //     div3.style.backgroundColor="green"
    // }
    // for(var n=1;n<4;n++){
    //     //1,2,3
    //     var divn=document.getElementById("divn")
    // }
    //在变量定义时 变量名称不能包含其他的变量
    // var x=100
    // console.log(x)
    //在变量定义时 变量名称不能包含其他的变量  
    //错误演示
    // var yx=20
    // console.log(y)
    //document.getElementByTagName()在文档中通过标签名称找到对应的元素，放入数组中
    var divs=document.getElementsByTagName("div")
    // console.log(divs)
    //依次拿出数组中的元素添加事件
    for(var n=0;n<divs.length;n++){
        //  console.log(divs[n])
       divs[n].onclick=function(){
        //console.log(1)
        //但点击第一个div  n=0 divs[0]
        //console.log(n)
        //this对象：this指向   发送事件的元素  事件源
        // console.log(this) 
        this.style.backgroundColor="skyblue"
        
       }
     }
    </script>
</body>
</html>

建议：大朋友做完送给小朋友玩也不错哦，可以变色，嘻嘻嘻。

最后祝小朋友儿童节快乐，开开心心，快快乐乐每一天。