如何制作 div 元素的图案答案

【问题标题】：How to make a pattern of div elements如何制作 div 元素的图案
【发布时间】：2021-01-05 19:11:58
【问题描述】：

将 ID 递增为数字的 Div 元素模式最有效的方法是什么？

我想要 56 列和 80 行。在左上角创建的第一个 div 的 id 为 1，在右下角创建的最后一个 div 的 id 为 4480。

我知道我能做到：

<style>
    .myGrid{
        display:grid;
        grid-template-columns: 1fr 1fr 1fr and so on...;
        grid-gap:5px;
        grid-auto-rows: 50px;
        grid-auto-columns: 50px;
    }
</style>

<body>
    <div class = "myGrid">
        <div class = "gridItem" id = "1"><div>
        <div class = "gridItem" id = "2"><div>
        <div class = "gridItem" id = "3"><div>
        and so on...
    </div>
</body>

但这需要 100 年才能打出来，而且我知道肯定有更好的方法。

我希望 id 增加的原因是，一旦我完成了网格模式，我想用 javascript 来定位它们。

【问题讨论】：

所以分解 JavaScript 并制作一些元素
grid-template-columns:repeat(56,1fr)maybe ?
stackoverflow.com/a/11026311/3536236是一个类似的JS解决方案，你应该可以从中得到思路
对于 ids :let gridChild = document.querySelectorAll(".mygrid>div"); for (let i = 0; i < gridChild.length; i++) {gridChild[i].setAttribute('id','grid-' + i); }

标签： html css

【解决方案1】：

所以创建一个 for 循环并开始创建元素并将其添加到页面中。

var temp = document.createElement("div");
temp.className = "myGrid";

var elem = document.createElement('div');
elem.className = 'gridItem';
for (var i = 0; i < 1000; i++) {
  var copy = elem.cloneNode();
  copy.setAttribute("data-id", i + 1);
  temp.appendChild(copy);
}

document.body.replaceChild(temp, document.querySelector('.myGrid'));

.myGrid {
  display: grid;
  grid-gap: 5px;
  grid-auto-rows: 50px;
  grid-template-columns: repeat(20, 1fr);
}

div.gridItem {
  border: 1px solid black;
}

div.gridItem::after {
  content: attr(data-id);
}

&lt;div class="myGrid"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

网格的模式可以使用repeat()来设置模板，增加ids，需要js：

示例：

let gridChild = document.querySelectorAll(".mygrid>div");
for (let i = 0; i < gridChild.length; i++) {
  gridChild[i].setAttribute('id', 'grid-' + i);
}

.mygrid {
  display: grid;
  grid-template-columns: repeat(56, 50px);
  grid-template-rows: repeat(80, 50px);
  grid-gap: 5px;
  /*
  grid-auto-rows: 50px;
  grid-auto-columns: 50px;
  */
  width:max-content;
}


/* show id */

div {
  border: 1px solid;
}

div div:before {
  content: attr(id)
}

<div class="mygrid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

【讨论】：