修改背景颜色

游鹄君2025年4月30日小于 1 分钟
示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>修改背景颜色</title>
  <style type="text/css">
    *
    {
     margin:0px;
     padding:0px;
    }
 
    div
    {
     width:100px;
     height:100px;
     float:left;
     margin-left:10px;
     cursor:pointer;
    }
  </style>
</head>
<body>
  <div style="background:green"></div>
  <div style="background:yellow">你好</div>
  <div style="background:blue"></div>
  <div style="background:red"></div>
 
  <script type="text/javascript">
  //获取对象 注意获取的数组对象
  var dv=document.getElementsByTagName('div');
 
    for (var i = 0; i < dv.length; i++) 
    {
       //这里dv[i]代表的就是不同的div
       dv[i].onclick=function()
       {
         //获取当前选择div的背景颜色
         var gai=this.style.background;
         //获取页面对象(注意:::同样是数组对象)
         var by=document.getElementsByTagName('body');
         //将获取到的div颜色给背景
         by[0].style.background=gai;
 
         //获取标签中间的文本
         console.log(this.innerHTML);
       }
    };
  </script>
</body>
</html>