我正在尝试构建 eclipse 刻草图，
用户收到提示，要求输入他们想要在网格中输入多少个正方形(div)，但我无法将这些 div 组织到网格中。
这是我的代码(请注意，我知道“grid-template-rows”和“grid-template-columns”不正确，这就是我要做的)
const container = document.getElementById('container')
const div = document.createElement('div')
const butt = document.getElementById('reset')
function changeColor() {
event.target.setAttribute('style', 'background-color: #434141;')
}
function makeGrid(x) {
x = prompt('how many squares (? by ?)')
let i = 0;
while (i < x * x) {
let dye = document.createElement('div')
dye.classList.add('dye')
container.appendChild(dye)
i++;
dye.addEventListener('mouseover', changeColor)
butt.addEventListener('click', () => {
dye.setAttribute('style', 'background-color: grey;')
})
}
}
makeGrid()#container {
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
background-color: #2196F3;
width: 600px;
height: 600px;
margin: auto;
margin-top: 60px;
max-height: 600px;
max-width: 600px;
}
.dye {
background-color: grey;
border: solid black 1px;
}
#reset{
color: white;
background-color: black;
margin-left: 500px;
margin-top: 20px;
outline: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container">
</div>
<button id="reset">Reset Grid</button>
<script src="index.js"></script>
</body>
</html>任何帮助将不胜感激!
最佳答案
您可以通过 javascript 更改网格模板列，以使用 repeat 动态添加列数。值。
document.getElementById('container').style.gridTemplateColumns = `repeat(${x}, 1fr)`
const container = document.getElementById('container')
const div = document.createElement('div')
const butt = document.getElementById('reset')
function changeColor() {
event.target.setAttribute('style', 'background-color: #434141;')
}
function makeGrid(x) {
x = prompt('how many squares (? by ?)')
let i = 0;
document.getElementById('container').style.gridTemplateColumns = `repeat(${x}, 1fr)`
while (i < x * x) {
let dye = document.createElement('div')
dye.classList.add('dye')
container.appendChild(dye)
i++;
dye.addEventListener('mouseover', changeColor)
butt.addEventListener('click', () => {
dye.setAttribute('style', 'background-color: grey;')
})
}
}
makeGrid()#container {
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
background-color: #2196F3;
width: 600px;
height: 600px;
margin: auto;
margin-top: 60px;
max-height: 600px;
max-width: 600px;
}
.dye {
background-color: grey;
border: solid black 1px;
}
#reset{
color: white;
background-color: black;
margin-left: 500px;
margin-top: 20px;
outline: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container">
</div>
<button id="reset">Reset Grid</button>
<script src="index.js"></script>
</body>
</html>关于javascript - 在网格中排列动态创建的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61000903/