使用 J*aScript 动态创建正方形网格_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用 J*aScript 动态创建正方形网格

2025-11-02

浏览次数：次

返回列表

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

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

样式属性的正确使用

初学者在使用 J*aScript 操作 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 关键字的使用。在 J*aScript 中，var 声明的变量具有函数作用域或全局作用域，而 let 和 const 声明的变量具有块级作用域。在循环中使用 var 时，容易出现变量提升（hoisting）和闭包问题，导致事件监听器绑定到同一个变量上，而不是每个正方形各自的变量。

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

随缘网络php企业网站管理系统2.0

随缘网络PHP企业网站管理系统V2.0正式发布，该企业网站管理系统采用PHP+MYSQL编写，界面色调风格延续之前1.0版管理系统简洁浅蓝色风格，稍有所变动。变更分类树形目录方式采用jquery库，产品，文章三级无限分类。希望大家能够喜欢。系统中难免有些小问题，希望大家在使用中有什么问题可到本站论坛提出，我们将总结各问题后给予修正并升级。本站再次声明对于免费版系列系统本站不提供QQ电话等技术咨询服

0 查看详情随缘网络php企业网站管理系统2.0

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);: 将行容器添加到父容器中。