Question

Hello All我是html和js的初学者，我正在尝试创建一个包含矩形集合的网页，其中创建一个新矩形时放在前一个矩形旁边。我创建了一个div元素并尝试添加新创建的div（基于条件的背景颜色不同的矩形形状），但我无法获得所需的结果。

<html>
    <head>
        <title>parkIn</title>
        <meta charset="utf-8" />
    </head>
    <style>
    .ParkSlots {
        border: solid 1px;
        width: 60%;
        height: 400px;
        top: 50%;
        left: 50%;
        position: fixed;
        transform: translate(-50%, -50%);
        display: inline;
    }

    .row:before,
    .row:after {
        content: "";
        display: table;
        clear: both;
    }

    .col-1 {
        width: 15%;
        margin-left: 10px;
        height: 350px;
        padding: 2px;
    }
    </style>

    <body onload="viewCreate()">
        <div class="ParkSlots">
            <div class="row" id="content">
            </div>
        </div>
    </body>
    <script language="javascript">
    function viewCreate() {
        for (int i = 0; i < 5; i++) {
            if (i % 2 == 0) {
                createGreenBox();
            } else {
                createRedBox();
            }
        }
    }

    function createRedBox() {
        var = document.createElement('div');
        div.className = 'col-1';
        div.style.backgroundColor = 'red';
        document.getElementById('content').appendChild(div);
    }

    function createGreenBox() {
        var = document.createElement('div');
        div.className = 'col-1';
        div.style.backgroundColor = 'lightgreen';
        document.getElementById('content').appendChild(div);
    }
    </script>
</html>

我想要一个看起来像这样的输出：

example

Answer 1

只是看一下你的代码，我看到至少有两个拼写错误：

for (int i = 0; i < 5; i++) { - 在JS中，int未以这种方式使用。使用var i = 0...
var = document.createElement('div'); - 您在两个创建框功能中都缺少此行的变量名称。我假设，您需要其余代码var div = document.createElement('div');

其余的将是CSS。在您的样式表中，您将边框应用于包含最多内容的div，例如，您需要将其应用于.col-1类。您还希望在该类上使用display:inline-block，并设置宽度和边距以适应边框大小。我冒昧地为你推荐了jsfiddle，推荐了我的建议。

使用js在html中创建动态Rectangle集合

1 个答案: