我被困了很长时间，因为我无法通过行和列访问 DIV 网格。我想我可以像 gridContainer[row][col] 一样访问它们并为其设置一些属性。控制台中的错误显示“未捕获类型错误:无法读取 HomeScript.js:25 处未定义的属性‘0’”。附上下面的代码片段供您引用。如有任何建议，我们将不胜感激。
function genDivs (rows, cols) {
var e = document.getElementById("gridContainer");
for (var r = 0; r < rows; r++) {
var row = document.createElement("div");
row.className = "row";
for (var c = 0; c < cols; c++) {
var cell = document.createElement("div");
if (r == 10 && c == 20)
cell.className = "gridsquare begin";
else if (r == 10 && c == 40)
cell.className = "gridsquare end";
else
cell.className = "gridsquare";
row.appendChild(cell);
}
e.appendChild(row);
}
}
var gridContainer = document.getElementById("gridContainer");
// gridContainer[0][0].style.backgroundColor = "pink"; (want something like this)
var gridCols = 60;
var gridRows = Math.floor(screen.height / 25) - 2;
gridContainer.style.left = ((screen.width - 25 * gridCols) / screen.width) * 50 + "%";
console.log(((screen.width - 25 * gridCols) / screen.width) * 50);
genDivs(20, 20);<!DOCTYPE html>
<html>
<head>
<style>
#gridContainer {
outline: 1px solid rgb(175, 216, 248);
font-size: 0;
position: absolute;
}
.row {}
.gridsquare {
width: 25px;
height: 25px;
box-shadow: 0 1px 0 rgb(175, 216, 248) inset, 1px 0px 0px rgb(175, 216, 248) inset;
display: inline-block;
}
.begin {
background-color: purple;
}
.end {
background-color: magenta;
}
</style>
</head>
<body>
<div id="gridContainer"></div>
<script type="text/javascript" src="HomeScript.js"></script>
</body>
</html>最佳答案
你可以使用JS querySelector， 如果您想访问第一行中的 3 个 div，请使用以下语法
let square = document.querySelector(".row:nth-child(1) .gridsquare:nth-child(3)");
square.style.background = '#000';
关于javascript - 如何访问我在 HTML 中创建的 DIV 网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61093720/