我正在做 odin 项目的 Etch-a-sketch 项目，到目前为止我已经能够制作网格并应用悬停效果。 我一直在尝试让子 div 正确适合父 div 。我正在考虑一种方法来调整子 div 的大小，但无法弄清楚。我还认为将父 div（容器）和子 div 大小设置为固定数字会给我带来问题。
如有任何帮助，我们将不胜感激！
<!DOCTYPE html>
<html lang="en">
<head>
<script src="script.js" defer></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Etch-A-Sketch</title>
</head>
<body>
<div id="container"></div>
</body>
</html>
let container = document.getElementById('container');
let squaresPerSide = prompt('Choose a number up to 100 to make a grid with that many squares on each side.');
function newGrid () {
let totalSquares = squaresPerSide * squaresPerSide
for (i = 0; i < totalSquares; i++) {
let myDivs = container.appendChild(document.createElement('div'));
myDivs.setAttribute('style', 'background-color: black; width: 10px; height: 10px; margin: 1px');
myDivs.addEventListener("mouseover", function() {
myDivs.style.backgroundColor = "red"
})
}
}
container.setAttribute('style', 'display: flex; width: 370px; flex-wrap: wrap; justify-content: center; align-items: center');
document.body.setAttribute('style', 'display: flex; justify-content: center; align-items: center; height: 100vh; margin: auto');
newGrid()
创建所需网格的一个简单解决方案可以是向 DOM 添加 row
divrow
squaresPerSide 之前向该 div 添加 divsquaresPerSidesquaresPerSidesquaresPerSide这是更好地解释这一点的代码：
for (i = 0; i < squaresPerSide; i++) {
const row = container.appendChild(document.createElement('div'));
for (j = 0; j < squaresPerSide; j++) {
let square = container.appendChild(document.createElement('div'));
square.setAttribute('style', 'background-color: black; width: 10px; height: 10px; margin: 1px');
square.addEventListener("mouseover", function() {
square.style.backgroundColor = "red"
})
row.appendChild(square);
}
}
这里有一个可以玩的小提琴：https://jsfiddle.net/s8zL9fq5/