我正在与一个canvas
的个人项目,这是一个CSS网格。它有17行和17列,而不是手动添加289for,而是在页面加载时创建一个div
循环来完成。
JavaScript:
var row = 1;
var column = 1;
function init() {
for (var i = 0; i < 289; i++) {
var div = document.createElement("div");
div.style.color = "gray";
div.style.gridRow = row;
div.style.gridColumn = column;
column += 1;
if (column == 17) {
row += 1;
column = 0;
}
console.log("test");
}
}
HTML:
<body onLoad="init();">
<canvas id="myCanvas" width="600" height="600"></canvas>
</body>
这是我尝试过的唯一一个“版本”,它没有向我抛出错误,但仍然没有显示出来。但是,它会运行,因为控制台显示"test"
。
我已经尝试过替换:
var div = document.createElement("div");
使用
var div = document.canvas.createElement("div");`,
var div = document.myCanvas.createElement("div");
...etc。(这可能不是正确的语法,但我还是尝试了一下),在计算document.myCanvas.createElement
时,它给出了这个错误
TypeError: undefined is not an object
基本上,我只想在页面加载时使用JS填充canvas
中的每个网格框。此外,我对编程非常陌生,所以非常感谢简单的术语。提前谢谢你。
发布于 2018-07-20 14:45:18
我最终创建了一个包含canvas
的div
,并替换为:
var div = document.createElement("div");
通过以下方式:
var newDiv = document.createElement("div");
document.getElementById("background").appendChild(newDiv);
它工作得很好。
https://stackoverflow.com/questions/51433918
复制相似问题