用JavaScript填充CSS網格

Question

我正在使用一個CSS網格canvas進行個人項目。 它是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

我最終創建了一個其中包含canvas的div並替換為：

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

有：

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

而且效果很好。

用JavaScript填充CSS網格

問題描述

1 個解決方案

解決方案1
0 2018-07-20 06:45:17

用JavaScript填充CSS網格

問題描述

1 個解決方案

解決方案1 0 2018-07-20 06:45:17

解決方案1
0 2018-07-20 06:45:17