Javascript 如何使用divs制作40x40网格？_Javascript_Html_Css

Javascript 如何使用divs制作40x40网格？

javascript html css

Javascript 如何使用divs制作40x40网格？,javascript,html,css,Javascript,Html,Css,我基本上是在尝试使用javascript在html文档中创建一个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 = "

我基本上是在尝试使用javascript在html文档中创建一个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);
    }

for（变量i=0；i<40；i++）{
对于（var j=0；j<40；j++）{
var div=document.createElement（“div”）；
div.style.width=“25px”；
div.style.height=“25px”；
div.style.background=“红色”；
}
var jump=document.createElement（“br”）；
document.getElementById（“容器”）.appendChild（跳转）；
document.getElementById（“容器”）.appendChild（div）；
}

问题是我似乎无法让它形成我创建的所有div的正方形。容器为1000 x 1000 px。

谢谢你

添加了一些CSS和

内联块

Div

s通常是块元素，您需要使它们成为内联块以帮助您使用网格

如果要消除线间距，请使用边距（即

边距：0；

减少边距或

边距：0 1px；

添加到每个正方形的侧面）

for（变量i=0；i<40；i++）{
var jump=document.createElement（“br”）；
对于（var j=0；j<40；j++）{
var div=document.createElement（“div”）；
div.style.width=“25px”；
div.style.height=“25px”；
div.style.background=“红色”；
document.getElementById（“容器”）.appendChild（div）；
}
document.getElementById（“容器”）.appendChild（跳转）；
}

#容器分区{
/*你需要这个*/
显示：内联块；
}
#容器{
宽度：1000px；
高度：1000px；
}

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

或者，您必须使用“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);
}

for（变量i=0；i<40；i++）{
var行=document.createElement（“div”）；
对于（var j=0；j<40；j++）{
var cell=document.createElement（“div”）；
cell.style.width=“25px”；
cell.style.height=“25px”；
cell.style.background=“红色”；
cell.style.display=“内联块”
子行（单元格）；
}
document.getElementById（“容器”）.appendChild（行）；
}

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

其次，需要将div设置为

display:inline

或

display:inline block

for（变量i=0；i<40；i++）{
对于（var j=0；j<40；j++）{
var div=document.createElement（“div”）；
div.style.width=“25px”；
div.style.height=“25px”；
div.style.background=“红色”；
document.getElementById（“容器”）.appendChild（div）；
}
}

#容器{
宽度：1000px；
高度：1000px；
}
#容器>分区{
显示：内联块；
}

我相信您想要的是：

for（变量i=0；i<40；i++）{
对于（var j=0；j<40；j++）{
var div=document.createElement（“div”）；
div.style.width=“25px”；
div.style.height=“25px”；
div.style.background=“红色”；
document.getElementById（“容器”）.appendChild（div）；
}
var jump=document.createElement（“br”）；
document.getElementById（“容器”）.appendChild（跳转）；
}

#容器{
宽度：1000px；
高度：1000px；
}
#货柜组{
显示：内联块；
垂直对齐：顶部；
}

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

for（变量i=0；i<40；i++）{
var div1=document.createElement（'div'）
对于（var j=0；j<40；j++）{
var div=document.createElement（“div”）；
div.style.width=“25px”；
div.style.height=“25px”；
div.style.background=“红色”；
div.style.display='inline block'；
div.style.margin='1px'
第1分部。附属子分部（分部）
}
document.getElementById（'container'）.appendChild（div1）；
}

这将为您提供：

<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、html和javascript

依我看，最好的方法是利用CSS类，而不是在javascript中单独创建每个元素，您可以使用

cloneNode（）

克隆第一个“框”

下面是一个示例（）和代码片段

var parent=document.getElementById（'parent'），
box=父项。子项[0]；
对于（变量i=0；i<100；++i）{
var nBox=box.cloneNode（真）；
父母、子女（nBox）；
}

.grid{
宽度：1000px；
高度：1000px；
背景颜色：绿色；
}
.盒子{
浮动：左；
宽度：40px；
高度：40px；
背景色：红色；
边框：1px纯白；
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
}

是否尝试使用css添加宽度和高度？是的，容器为1000 x 1000 px@ochiyou需要为所有div设置css float属性。。。实际上根本不需要js在每个div之后添加一个break，并且需要将它们的display属性设置为inline-block@mb21我可以用css来做，但是我想知道如何用JavaScription来做，中断不应该在外循环中，而不是在每个div之后吗？这将为每个添加的div创建一个新行。。。你试过了吗？我没有意识到“br”背后的想法，如果你想制作一个40x40网格，只需尝试上面的代码并删除中断。我希望它能起作用：）如果你想把每40个div放在一行中，只需将其添加到一个容器div中，让我们将其命名为“row”，然后将“row”添加到“container”中。在本例中，您将有40个组（行div），每个组有40个单元格（方形div）。我刚刚编辑了我的答案，我想这就是您要寻找的：）如果我绝对定位div会发生什么？那么您需要显式设置每个div的坐标。每行将有40个div堆叠在一起。有

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);
}

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);
}

<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>

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