为何JavaScript设置的CSS Grid样式生效后瞬间消失？

核心问题分析与修复 #

1. 表单提交导致页面刷新 #

表单默认提交行为会触发页面刷新，刚生成的网格因此瞬间消失。解决方法是在createGrid函数中阻止默认提交事件：

• 给函数添加event参数，调用event.preventDefault()

2. 嵌套循环变量冲突 #

内外层循环都使用i作为变量，导致外层循环仅执行一次，只能生成一行网格元素。把内层循环变量改为j即可。

3. NodeList无法直接绑定事件 #

document.querySelectorAll(".gridElement")返回的是NodeList集合，不能直接调用addEventListener，需要遍历每个元素绑定事件（你已经在CSS中定义了hover样式，这段JS可以直接移除）。

4. 变量未声明导致全局污染 #

sizeOfGrid、i等变量没有用let/const声明，会变成全局变量，容易引发问题，需要添加声明。

修复后的完整代码 #

HTML #

<html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="settings">
      <h2>Settings</h2>
      <form onsubmit="createGrid(event)">
        <label for="gridSize">Size of grid?</label>
        <input
          maxlength="2"
          type="number"
          name="gridSize"
          id="gridSize"
        />
        <input type="submit" value="Create!">
      </form>
    </div>

    <br>
    <br>
    <br>

    <div id="container"></div>

    <script src="script.js"></script>
  </body>
</html>

JavaScript #

const container = document.getElementById("container");

function createGrid(event) {
  // 阻止表单默认提交行为
  event.preventDefault();
  
  // 清空容器，避免重复生成网格
  container.innerHTML = "";
  
  const sizeOfGrid = parseInt(document.getElementById("gridSize").value);
  if (isNaN(sizeOfGrid) || sizeOfGrid <= 0) return;

  // 设置网格行列
  container.style.gridTemplateRows = `repeat(${sizeOfGrid}, 1fr)`;
  container.style.gridTemplateColumns = `repeat(${sizeOfGrid}, 1fr)`;

  // 生成网格元素
  for (let i = 0; i < sizeOfGrid; i++) {
    for (let j = 0; j < sizeOfGrid; j++) {
      const gridElement = document.createElement("div");
      gridElement.classList.add("gridElement");
      container.appendChild(gridElement);
    }
  }

  // 若需JS控制hover效果，可启用以下代码（CSS已实现该效果，可选）
  // const gridElements = document.querySelectorAll(".gridElement");
  // gridElements.forEach(element => {
  //   element.addEventListener("mouseover", function () {
  //     this.style.backgroundColor = "black";
  //   });
  // });
}

CSS #

html {
    padding: 50px;
}

#container {
    display: grid;
    height: 800px;
    width: 800px;
    gap: 1px; /* 可选：添加网格间隙，让结构更清晰 */
    background-color: #ccc; /* 配合间隙显示网格线 */
}

.gridElement {
    background-color: rgba(69, 69, 69, 0.1);
}

.gridElement:hover {
    background-color: rgba(69, 69, 69, 0.5);
}

内容的提问来源于stack exchange，提问作者FrostByte