使用 JavaScript 动态创建正方形网格-js教程-PHP中文网

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

花韻仙語

发布： 2025-11-02 21:56:02

原创

372人浏览过

使用 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满血版

查看详情

const parentDiv = document.querySelector(".parent-div");: 获取 HTML 中类名为 "parent-div" 的父容器。
for (let i = 0; i < 10; 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; 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") 可能无法找到父容器，导致代码无法正常工作。

解决方法有两种：

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

使用 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 加载完成后执行。

以上就是使用 JavaScript 动态创建正方形网格的详细内容，更多请关注php中文网其它相关文章！