Java 脚本 div 的切换颜色

Question

以下脚本正在创建一个包含 16 个 div 的网格。根据鼠标悬停效果，我想永久更改 div 的颜色。有人可以指点一下 changeColor 函数的样子吗？

<script>

let gridcontainer = document.querySelector('#gridcontainer');
gridcontainer.setAttribute('style', 'width: 20px; display: grid; grid-template-columns: auto auto auto auto;')

var index = [];
var boxes;
var i;
var change;

function createGrid(){                     
  for(i=0;i<16;i++){


                                          //console.log(index);

    boxes = document.createElement('div');
                                          console.log(boxes);
    boxes.classList.add('boxes');
    boxes.setAttribute('style','width: 30px; height:30px; background-color: 
    blue; margin: 5px;');
    boxes.setAttribute('onmouseover', changeColor());
    gridcontainer.appendChild(boxes);  

  }}

  function changeColor(){
  change = document.querySelector('.boxes');
  change.setAttribute('style','background-color: red');

  }
</script>

谢谢大家的帮助。

Answer 1

我已经使用 jquery 函数 (toggleClass) 在悬停时更改颜色 div

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css">
    .b1{
        background:red;
        width: 30px;
        height: 40px;
        margin: 10px;
    }
    .b{
        background:blue;
        width: 30px;
        height: 40px;
        margin: 10px;
    }
    </style>
</head>
<body>
    <div class="b1"></div>
    <div class="b1"></div>
    <div class="b1"></div>
    <div class="b1"></div>
    <div class="b1"></div>
<script type="text/javascript">
    $('div').hover(function () {
        // body...
         $("div").toggleClass("b");
    });
</script>
</body>
</html>

Java 脚本 div 的切换颜色

Java script Switching color of div

javascript

onmouseover