Question

我正在使用一个canvas是CSS网格的个人项目。它是17行和列，而不是手动添加289 div，而是创建一个for循环，以便在页面加载时为我执行此操作。

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");

...等（这可能不是正确的语法，但是我还是尝试了它们），在评估document.myCanvas.createElement时，它给了我这个错误：

TypeError: undefined is not an object

基本上，我只希望在页面加载时使用JS填充canvas中的每个网格框。另外，我对编程非常陌生，因此非常感谢您使用简单的术语。预先谢谢你。

Answer 1

我最终创建了一个div，其中包含canvas并替换了：

var div = document.createElement("div");

具有：

var newDiv = document.createElement("div"); 
document.getElementById("background").appendChild(newDiv);

效果很好。

用JavaScript填充CSS网格

1 个答案: