JavaScript动态创建正方形网格：颜色控制与变量作用域详解

本文旨在帮助开发者理解并解决使用JavaScript动态创建正方形网格时遇到的常见问题，重点关注颜色属性的正确使用以及变量作用域的影响。通过修改CSS的`background-color`属性控制背景色，并使用`let`关键字声明变量，避免变量提升和作用域问题，从而实现预期的动态网格效果。

正确设置背景颜色

在JavaScript中，要改变一个元素的背景颜色，应该使用backgroundColor属性，而不是color属性。color属性是用来设置文本颜色的。因此，将以下代码：

newChild.style.color = "#f389ca";

替换为：

newChild.style.backgroundColor = "#f389ca";

同样，鼠标悬停时的颜色改变也需要使用backgroundColor：

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

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

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

理解变量作用域与var、let的区别

在JavaScript中，var声明的变量具有函数作用域或全局作用域，而let声明的变量具有块级作用域。这意味着在for循环中使用var声明变量时，变量会被提升（hoisted）到函数顶部，导致循环内的addEventListener回调函数始终引用的是循环结束时的变量值。

美图AI开放平台

美图推出的AI人脸图像处理平台

下载

以下代码片段展示了使用var可能导致的问题：

const parentDiv = document.querySelector(".parent-div");

for (var i = 0; i < 10; i++) {
    var childDiv = document.createElement("div");
    childDiv.style.display = "flex";
    childDiv.style.flex = "1";

    for (var k = 0; k < 10; k++) {
        var 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";

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

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

        childDiv.appendChild(newChild);
    }

    parentDiv.appendChild(childDiv);
}

为了解决这个问题，应该使用let来声明循环变量，确保每个newChild都有自己的作用域：

const parentDiv = document.querySelector(".parent-div");

for (let i = 0; i < 10; i++) {
    let childDiv = document.createElement("div");
    childDiv.style.display = "flex";
    childDiv.style.flex = "1";

    for (let k = 0; k < 10; k++) {
        let 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";

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

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

        childDiv.appendChild(newChild);
    }

    parentDiv.appendChild(childDiv);
}

确保DOM元素加载完毕

另一个常见问题是JavaScript代码在DOM元素加载之前执行。这会导致document.querySelector(".parent-div")返回null，从而无法找到父元素。

解决方法有两种：

1. 将JavaScript代码放在