Question

我基本上是想在我的html文档中使用javascript创建一个40x40的div红色网格。

这是我的循环：

for(var i = 0; i < 40; i++) {
        for(var j = 0; j< 40; j++) {
            var div = document.createElement("div");
            div.style.width = "25px";
            div.style.height = "25px";
            div.style.background = "red";
        }
        var jump = document.createElement("br");
        document.getElementById("container").appendChild(jump);
        document.getElementById("container").appendChild(div);
    }

问题是我似乎无法形成我创建的所有div的正方形。容器是1000 x 1000像素。谢谢

Answer 1

您只需要将最后3行放在内部循环内（不在外部循环内）：

for(var i = 0; i < 40; i++) {
    for(var j = 0; j< 40; j++) {
        var div = document.createElement("div");
        div.style.width = "25px";
        div.style.height = "25px";
        div.style.background = "red";

        var jump = document.createElement("br");
        document.getElementById("container").appendChild(jump);
        document.getElementById("container").appendChild(div);
    }
}

另外，不要忘记将'display'设置为'inline-block'：

div.style.display = "inline-block";

或者，您必须使用'float'属性：

div.style.float = "left";

修改

使用row-div对一行中的每个40个单元格进行分组：

for(var i = 0; i < 40; i++) { var row = document.createElement("div"); for(var j = 0; j< 40; j++) { var cell = document.createElement("div"); cell.style.width = "25px"; cell.style.height = "25px"; cell.style.background = "red"; cell.style.display = "inline-block" row.appendChild(cell); } document.getElementById("container").appendChild(row); }

Answer 2

首先，您需要在每次循环迭代中附加创建的div。

其次，您需要将div设置为display: inline或display: inline-block

＆＃13;

for(var i = 0; i < 40; i++) {
        for(var j = 0; j< 40; j++) {
            var div = document.createElement("div");
            div.style.width = "25px";
            div.style.height = "25px";
            div.style.background = "red";
            document.getElementById("container").appendChild(div);
        }
    }

＆＃13;

#container {
  width: 1000px;
  height: 1000px;
}

#container > div {
  display: inline-block;
}

＆＃13;

<div id="container"></div>

＆＃13;

Answer 3

我相信你想要的是以下内容：

for (var i = 0; i < 40; i++) {
    for (var j = 0; j < 40; j++) {
        var div = document.createElement("div");
        div.style.width = "25px";
        div.style.height = "25px";
        div.style.background = "red";
        document.getElementById("container").appendChild(div);
    }
    var jump = document.createElement("br");
    document.getElementById("container").appendChild(jump);
}

#container {
    width:1000px;
    height:1000px;
}
#container div {
    display:inline-block;
    vertical-align:top;
}

<div id="container"></div>

你的内部div可以是内联块元素，以便它们彼此相邻（因为div默认是块级别）。您还需要在每个内部（j）循环后插入换行符。因此，过程将是：生成40个内联div，插入换行符，生成40个内联div，插入换行符，...（再重复38次）。

Answer 4

添加一点CSS和inline-block

Div通常是块元素，您需要使用内联块来帮助您处理网格。

如果你想删除线间距，请使用边距（例如margin: 0;减少或margin: 0 1px;添加到每个方格的边）

＆＃13;

for (var i = 0; i < 40; i++) {
  var jump = document.createElement("br");

  for (var j = 0; j < 40; j++) {
    var div = document.createElement("div");
    div.style.width = "25px";
    div.style.height = "25px";
    div.style.background = "red";
    document.getElementById("container").appendChild(div);
  }

  document.getElementById("container").appendChild(jump);
}

＆＃13;

#container div {
  /* you need this */
  display: inline-block;

}

#container {
  width: 1000px;
  height: 1000px;
}

＆＃13;

<div id="container">

</div>

＆＃13;

Answer 5

这里，这实际上在40个父div（如行）中创建了40个div：

for(var i = 0; i < 40; i++) {
    var div1 = document.createElement('div')
    for(var j = 0; j< 40; j++) {
        var div = document.createElement("div");
        div.style.width = "25px";
        div.style.height = "25px";
        div.style.background = "red";
        div.style.display = 'inline-block';
        div.style.margin = '1px'
        div1.appendChild(div)
    }
    document.getElementById('container').appendChild(div1);
}

http://plnkr.co/edit/1jVBeYIMaGfzzgqt7yUj?p=info

Answer 6

您可以混合使用css，html和javascript。

恕我直言，最好的方法是利用CSS类，而不是在javascript中单独创建每个元素，您可以使用cloneNode()克隆第一个＆＃34;框＆＃34;。

这是一个示例（fiddle here）和下面的代码段

＆＃13;

var parent = document.getElementById('parent'),
  box = parent.children[0];

for (var i = 0; i < 100; ++i) {
  var nBox = box.cloneNode(true);
  parent.appendChild(nBox);
}

＆＃13;

.grid {
  width: 1000px;
  height: 1000px;
  background-color: green;
}
.box {
  float: left;
  width: 40px;
  height: 40px;
  background-color: red;
  border: 1px solid white;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

＆＃13;

<div id="parent" class="grid">
  <div class="box">&nbsp;</div>
</div>

＆＃13;

Answer 7

这将为您完成：

<body onload="makeGrid()" id="container">
<body>
<script>
  function makeGrid(){
    for(var i = 0; i < 40; i++) {         
        for(var j = 0; j< 40; j++) {

            var div = document.createElement("div");
            div.style.width = "25px";
            div.style.height = "25px";
            div.style.background = "red";
            document.getElementById("container").appendChild(div);
        }

        //document.getElementById("container").appendChild(jump);
        //document.getElementById("container").appendChild(div);
    }
    }
</script>

<强> CSS

#container{width: 1000px; height: 1000px;}
div{float: left;}

参见示例：http://jsfiddle.net/bun4g2d0/9/

如何使用div制作40x40网格？

7 个答案: