JavaScript 完美正方形

本文介绍了如何使用 JavaScript 绘制一个完美的正方形，并返回 Markdown 格式的代码片段。

准备

在开始之前，你需要确保已经具备以下条件：

• 了解基本的 HTML 和 CSS
• 使用 JavaScript 创建和操作 HTML 元素的基本知识

步骤

下面是使用 JavaScript 绘制完美正方形的步骤：

1. 创建一个 HTML 文件，并在 head 标签中添加如下代码片段：

<style>
    .square {
        width: 200px;
        height: 200px;
        background-color: blue;
    }
</style>

2. 在 body 标签中添加一个 div 元素，为它指定 square 类名，如下：

<div class="square"></div>

3. 在 JavaScript 文件中，使用 addEventListener 方法监听页面加载完成事件 DOMContentLoaded，并在事件处理程序中添加以下代码：

document.addEventListener("DOMContentLoaded", function() {
    var square = document.querySelector(".square");
    var squareSize = square.offsetWidth;

    square.style.height = squareSize + "px";
});

4. 运行你的 HTML 文件，你将会看到一个蓝色的正方形在页面中间显示出来。

解释

• 首先，我们在 CSS 中为 .square 类指定了宽度和高度为 200px，背景颜色为蓝色。
• 然后，在 JavaScript 中，我们在页面加载完成时获取 .square 元素，并获取它的宽度值。
• 最后，我们将获取到的宽度值设置为 .square 元素的高度，从而创建一个完美的正方形。

结论

通过上述步骤，你可以使用 JavaScript 绘制一个完美的正方形。请注意，你可以根据需要调整正方形的尺寸和样式。