使用 JavaScript 动态创建正方形网格

本文旨在解决 JavaScript 代码无法在网页父容器中创建正方形块的问题。我们将深入探讨问题的根源，包括样式属性的误用和变量作用域的理解，并提供修复后的代码示例，助你掌握使用 JavaScript 动态生成网页元素的方法，并避免常见的错误。

样式属性的正确使用

初学者在使用 JavaScript 操作 CSS 样式时，容易混淆属性名称。在这个例子中，问题在于尝试使用 color 属性来改变正方形的背景颜色。color 属性专门用于设置文本颜色，而要改变背景颜色，应该使用 backgroundColor 属性。

以下是正确的代码示例：

newChild.style.backgroundColor = "#f389ca";
newChild.addEventListener("mouseover", function(){
newChild.style.backgroundColor = "#8e2db8";
});
newChild.addEventListener("mouseout", function(){
newChild.style.backgroundColor = "#f389ca";
});

变量作用域与 var 的陷阱

另一个关键问题在于 var 关键字的使用。在 JavaScript 中，var 声明的变量具有函数作用域或全局作用域，而 let 和 const 声明的变量具有块级作用域。在循环中使用 var 时，容易出现变量提升（hoisting）和闭包问题，导致事件监听器绑定到同一个变量上，而不是每个正方形各自的变量。

立即学习“Java免费学习笔记（深入）”；

下面的代码展示了使用 let 修复后的示例，确保每个事件监听器都绑定到正确的正方形元素：

const parentDiv = document.querySelector(".parent-div");
for (let i = 0; i < 10; i++) {
const childDiv = document.createElement("div");
childDiv.style.display = "flex";
childDiv.style.flex = "1";
for (let k = 0; k < 10; k++) {
const newChild = document.createElement("div");
newChild.style.flex = "1";
newChild.style.height = "48px";
newChild.style.width = "48px";
newChild.style.border = "2px black solid";
newChild.style.backgroundColor = "#f389ca"; // Corrected property
newChild.addEventListener("mouseover", function(){
newChild.style.backgroundColor = "#8e2db8"; // Corrected property
});
newChild.addEventListener("mouseout", function(){
newChild.style.backgroundColor = "#f389ca"; // Corrected property
});
childDiv.appendChild(newChild);
}
parentDiv.appendChild(childDiv);
}

代码解释：

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

26

查看详情

1. const parentDiv = document.querySelector(“.parent-div”);: 获取 HTML 中类名为 “parent-div” 的父容器。
2. for (let i = 0; i < 10; i++) { … }: 外层循环创建 10 行。使用 let 声明循环变量 i。
3. const childDiv = document.createElement(“div”);: 创建每一行的容器 div。
4. childDiv.style.display = “flex”; childDiv.style.flex = “1”;: 设置行容器的 Flexbox 布局，使其子元素水平排列。
5. for (let k = 0; k < 10; k++) { … }: 内层循环在每一行中创建 10 个正方形。使用 let 声明循环变量 k。
6. const newChild = document.createElement(“div”);: 创建正方形 div 元素。
7. newChild.style.flex = “1”; newChild.style.height = “48px”; newChild.style.width = “48px”; newChild.style.border = “2px black solid”; newChild.style.backgroundColor = “#f389ca”;: 设置正方形的 Flexbox 属性、高度、宽度、边框和背景颜色。
8. newChild.addEventListener(“mouseover”, function(){ … }); newChild.addEventListener(“mouseout”, function(){ … });: 为每个正方形添加鼠标悬停和移开事件监听器，改变背景颜色。
9. childDiv.appendChild(newChild);: 将正方形添加到行容器中。
10. parentDiv.appendChild(childDiv);: 将行容器添加到父容器中。

确保脚本在 DOM 加载完成后执行

如果 JavaScript 代码在 HTML 元素加载之前执行，document.querySelector(“.parent-div”) 可能无法找到父容器，导致代码无法正常工作。

解决方法有两种：

1. 将 <script> 标签放在 </body> 标签之前，确保 HTML 元素已经加载完毕。

2. 使用 DOMContentLoaded 事件监听器，在 DOM 加载完成后执行 JavaScript 代码：

   document.addEventListener("DOMContentLoaded", function() {
   // Your JavaScript code here
   const parentDiv = document.querySelector(".parent-div");
   // ... rest of your code
   });

总结

动态创建网页元素是 Web 开发中的常见任务。理解 CSS 属性的正确用法、变量作用域以及 DOM 加载时机至关重要。 通过本文的讲解和示例代码，你现在应该能够使用 JavaScript 动态创建正方形网格，并避免常见的错误。记住，使用 backgroundColor 设置背景颜色，使用 let 或 const 声明块级作用域的变量，并确保脚本在 DOM 加载完成后执行。