如何更改特定网格框的背景颜色？答案

【问题标题】：How can I change background color of a specific grid box?如何更改特定网格框的背景颜色？
【发布时间】：2021-03-20 04:41:08
【问题描述】：

以下是我当前的代码，目标是当鼠标悬停在单个网格框上时将其更改为随机指定的颜色。我正在尝试为每个网格项添加一个事件侦听器，当鼠标悬停时颜色会发生变化，但是当我运行它时没有颜色变化。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>

    <style>
        .square {
            background-color: #737373;
            float: left;
            position: relative;
            width: 30%;
            padding-bottom: 30.66%;
            margin: 1%;
        }
    </style>
</head>
<body>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>

    <script type="text/javascript">

        var color = [, "#3C9EE7", "#E7993C",
            "#E73C99", "#3CE746", "#E7993C"];

        document.querySelectorAll(".square").forEach(item => {
            item.addEventListener("mouseover", event => {

            document.getElementById(item).style.background
                    = color[Math.floor(Math.random() * color.length)];
            }
        })

    </script>
</body>
</html>

我也尝试了这段 Javascript 代码，但没有成功：

let squares = document.querySelectorAll(".square");

for (i in squares) {
            i.addEventListener("mouseover", function() {

            document.getElementById(item).style.background
                    = color[Math.floor(Math.random() * color.length)];
            })
        }

【问题讨论】：

您可以使用简单的 css :nth-child 和 :hover 来完成。我认为你不需要 javascript。
@DebsmitaPaul——但是如何随机化颜色？
@RobG 哦...是的.. 差点没注意到，抱歉。

标签： javascript html css css-grid

【解决方案1】：

试试这个语法：

var color = [, "#3C9EE7", "#E7993C",
            "#E73C99", "#3CE746", "#E7993C"];
                                
let squares= document.querySelectorAll('.square');

squares.forEach(item => item.addEventListener('mouseover', (e) => {
    changeColor(item);
}))


const changeColor = (item) => {
  item.style.background = color[Math.floor(Math.random() * color.length)];
}

.square {
    background-color: #737373;
    float: left;
    position: relative;
    width: 30%;
    padding-bottom: 30.66%;
    margin: 1%;
}

<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

【讨论】：

【解决方案2】：

使用颜色数组

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title></title>

    <style>
      .square {
        background-color: #737373;
        float: left;
        position: relative;
        width: 30%;
        padding-bottom: 30.66%;
        margin: 1%;
      }
    </style>
  </head>
  <body>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>

    <script>
      let color = ["#3C9EE7", "#E7993C", "#E73C99", "#3CE746", "#E7993C"];

      document.querySelectorAll(".square").forEach((item, i) => {
        let mouseOverFunc = function () {
          this.style.background =
            color[Math.floor(Math.random() * color.length)];
        };
        item.onmouseover = mouseOverFunc;
      });
    </script>
  </body>
</html>

使用随机颜色

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title></title>

    <style>
      .square {
        background-color: #737373;
        float: left;
        position: relative;
        width: 30%;
        padding-bottom: 30.66%;
        margin: 1%;
      }
    </style>
  </head>
  <body>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>

    <script>
      document.querySelectorAll(".square").forEach((item, i) => {
        let mouseOverFunc = function () {
          this.style.background =
            "#" + Math.floor(Math.random() * 16777215).toString(16);
        };
        item.onmouseover = mouseOverFunc;
      });
    </script>
  </body>
</html>

【讨论】：