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

技术教程
2025-11-02 21:18:01

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

本文旨在解决使用 J*aScript 动态创建正方形网格布局时遇到的问题。通过分析代码，找出导致无法正确生成正方形块的原因，并提供相应的解决方案，包括正确使用 CSS 属性以及避免 J*aScript 变量声明的常见陷阱，帮助开发者构建动态、交互式的网页布局。

动态创建正方形网格

在前端开发中，经常需要使用 J*aScript 动态地生成 HTML 元素，例如创建一个正方形网格布局。以下代码尝试实现这个功能：

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.color = "#f389ca";

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

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

        childDiv.appendChild(newChild);
    }

    parentDiv.appendChild(childDiv);
}

这段代码的目的是在一个 parent-div 元素中动态创建 10 行，每行 10 个正方形的网格。每个正方形在鼠标悬停时改变颜色。然而，这段代码存在一些问题，导致无法正确实现预期效果。

问题分析与解决方案

CSS 属性使用错误：

代码中使用 newChild.style.color 来改变正方形的背景颜色。color 属性用于设置文本颜色，而不是背景颜色。

解决方案： 将 newChild.style.color 替换为 newChild.style.backgroundColor。

newChild.style.backgroundColor = "#f389ca"; // 初始背景色
// ...
newChild.addEventListener("mouseover", function(){
    newChild.style.backgroundColor = "#8e2db8"; // 鼠标悬停时的背景色
});

newChild.addEventListener("mouseout", function(){
    newChild.style.backgroundColor = "#f389ca"; // 鼠标移开时的背景色
});

变量声明问题（var 的作用域）：
随缘网络php企业网站管理系统2.0
随缘网络PHP企业网站管理系统V2.0正式发布，该企业网站管理系统采用PHP+MYSQL编写，界面色调风格延续之前1.0版管理系统简洁浅蓝色风格，稍有所变动。变更分类树形目录方式采用jquery库，产品，文章三级无限分类。希望大家能够喜欢。系统中难免有些小问题，希望大家在使用中有什么问题可到本站论坛提出，我们将总结各问题后给予修正并升级。本站再次声明对于免费版系列系统本站不提供QQ电话等技术咨询服
0 查看详情
在 J*aScript 中，使用 var 声明的变量存在变量提升（hoisting）现象，并且作用域是函数级别的。这意味着在循环中多次声明 var newChild 实际上只有一个 newChild 变量，每次循环都会覆盖它的值。当事件监听器被触发时，它们都指向循环结束时的最后一个 newChild 元素。

解决方案： 使用 let 或 const 声明变量。let 和 const 具有块级作用域，每次循环都会创建一个新的变量实例。
```
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);
}
```
脚本加载时机：

如果 J*aScript 代码在 HTML 元素 parent-div 之前加载，document.querySelector(".parent-div") 将返回 null，导致后续操作失败。

解决方案：
- 将 <script> 标签放在 </script>