本文旨在解决 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 修复后的示例，确保每个事件监听器都绑定到正确的正方形元素：
随缘网络PHP企业网站管理系统V2.0正式发布，该企业网站管理系统采用PHP+MYSQL编写，界面色调风格延续之前1.0版管理系统简洁浅蓝色风格，稍有所变动。变更分类树形目录方式采用jquery库，产品，文章三级无限分类。希望大家能够喜欢。系统中难免有些小问题，希望大家在使用中有什么问题可到本站论坛提出，我们将总结各问题后给予修正并升级。本站再次声明对于免费版系列系统本站不提供QQ电话等技术咨询服
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);
}代码解释：
- const parentDiv = document.querySelector(".parent-div");: 获取 HTML 中类名为 "parent-div" 的父容器。
- for (let i = 0; i : 外层循环创建 10 行。使用 let 声明循环变量 i。
- const childDiv = document.createElement("div");: 创建每一行的容器 div。
- childDiv.style.display = "flex"; childDiv.style.flex = "1";: 设置行容器的 Flexbox 布局，使其子元素水平排列。
- for (let k = 0; k : 内层循环在每一行中创建 10 个正方形。使用 let 声明循环变量 k。
- const newChild = document.createElement("div");: 创建正方形 div 元素。
- newChild.style.flex = "1"; newChild.style.height = "48px"; newChild.style.width = "48px"; newChild.style.border = "2px black solid"; newChild.style.backgroundColor = "#f389ca";: 设置正方形的 Flexbox 属性、高度、宽度、边框和背景颜色。
- newChild.addEventListener("mouseover", function(){ ... }); newChild.addEventListener("mouseout", function(){ ... });: 为每个正方形添加鼠标悬停和移开事件监听器，改变背景颜色。
- childDiv.appendChild(newChild);: 将正方形添加到行容器中。
- parentDiv.appendChild(childDiv);: 将行容器添加到父容器中。
确保脚本在 DOM 加载完成后执行
如果 JavaScript 代码在 HTML 元素加载之前执行，document.querySelector(".parent-div") 可能无法找到父容器，导致代码无法正常工作。
解决方法有两种：
将
