Html 如何制作div元素的模式_Html_Css

Html 如何制作div元素的模式

html css

Html 如何制作div元素的模式,html,css,Html,Css,用递增的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;

用递增的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>


.myGrid{
显示：网格；
网格模板列：1fr 1fr 1fr等。。。；
网格间距：5px；
网格自动行：50px；
网格自动列：50px；
}
等等

但这需要100年的时间才能打印出来，我知道一定有更好的方法

我希望id递增的原因是，我希望在网格模式完成后使用javascript将它们作为目标。

因此，创建一个for循环，开始创建元素并将其添加到页面中

var temp=document.createElement（“div”）；
temp.className=“myGrid”；
var elem=document.createElement（'div'）；
elem.className='gridItem'；
对于（变量i=0；i<1000；i++）{
var copy=elem.cloneNode（）；
copy.setAttribute（“数据id”，i+1）；
临时附件（副本）；
}
document.body.replaceChild（temp、document.querySelector（'.myGrid'）
.myGrid{
显示：网格；
网格间距：5px；
网格自动行：50px；
网格模板列：重复（20，1fr）；
}
div.gridItem{
边框：1px纯黑；
}
div.gridItem:：after{
内容：attr（数据id）；
}
网格模式可以使用repeat（）设置模板，以增加ID，需要js：
例如：

let gridChild=document.querySelectorAll（“.mygrid>div”）；
for（设i=0；i

.mygrid{
显示：网格；
网格模板列：重复（5650px）；
网格模板行：重复（8050px）；
网格间距：5px；
/*
网格自动行：50px；
网格自动列：50px；
*/
宽度：最大含量；
}
/*显示id*/
div{
边框：1px实心；
}
分区：以前{
内容：属性（id）
}

所以，把JavaScript分解出来，制作一些元素网格模板列：重复（56,1fr）
也许？是一个类似的JS解决方案，您应该能够从中了解到ID的想法：let gridChild=document.queryselectoral（“.mygrid>div”）；对于（设i=0；i