如何用JavaScript填充CSS网格?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (40)

我正在做一个个人项目canvas这是一个CSS网格。它是17行和列,而不是添加289div。这是手动的,我将创建一个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

基本上,我只希望每个网格框都在canvas在页面加载时使用JS填充。

提问于
用户回答回答于

最后我创建了一个div有.canvas在里面并替换:

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

有:

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

扫码关注云+社区

领取腾讯云代金券