在javascript中使用for循環添加HTML矩形

我想在HTML頁面上繪製一個2 x 2的藍色矩形網格，但是我的代碼沒有繪製任何東西。我創建了一個片段以添加我想稍後添加的內容，並將div添加到toAdd。我不太清楚哪裏出錯了，當我嘗試添加console.log（）時，我可以確認addSquares正在被調用。我是否需要向HTML文件添加任何內容，或者在此代碼中是否存在錯誤？我也注意到，這段代碼產生五個div：b0，b1，b2，b3，b1（返回錯誤），我不確定我的for循環出了什麼問題。在javascript中使用for循環添加HTML矩形

dim = 2; 
width = 50; 
height = 50; 

// add the squares 
function addSquares() 
{ 
    var toAdd = document.createDocumentFragment(); 
    for(var i = 0; i < dim; i++) 
    { 
    for(var j = 0; j < dim; j++) 
    { 
     var label = j + i * dim; 
     var name = "b" + label; 
     console.log(name) 
     var div = document.createElement(name); 
     div.style.width = width + "px"; 
     div.style.height = height + "px"; 
     div.style.left = width * j + "px"; 
     div.style.top = height * i + "px"; 
     div.style.position = "absolute"; 
     div.style.color = "blue"; 
     toAdd.appendChild(div); 
    } 
    } 
    document.appendChild(toAdd); 
}

來源

2016-12-06 MLE

所以看起來有兩個問題。你需要改變第一個是：

document.appendChild(toAdd);

到

document.body.appendChild(toAdd);

你的第二個問題是您使用了錯誤的CSS樣式聲明。您的div位於DOM中，但沒有分配給他們的backgroundColor，這反過來給人錯覺他們不在那裏。因此，而不是color使用backgroundColor。

dim = 2; 
 
width = 50; 
 
height = 50; 
 

 
// add the squares 
 
function addSquares() 
 
{ 
 
    var toAdd = document.createDocumentFragment(); 
 
    for(var i = 0; i < dim; i++) 
 
    { 
 
    for(var j = 0; j < dim; j++) 
 
    { 
 
     var label = j + i * dim; 
 
     var name = "b" + label; 
 
     console.log(name) 
 
     var div = document.createElement(name); 
 
     div.style.width = width + "px"; 
 
     div.style.height = height + "px"; 
 
     div.style.left = width * j + "px"; 
 
     div.style.top = height * i + "px"; 
 
     div.style.position = "absolute"; 
 
     div.style.backgroundColor = "blue"; 
 
     toAdd.appendChild(div); 
 
    } 
 
    } 
 
    document.body.appendChild(toAdd); 
 
} 
 

 
addSquares();

來源

2016-12-06 02:16:18

我試過這個，但矩形仍然沒有出現 – MLE

更新了我的答案。看看，讓我知道如果這解決您的問題。 –

是的，這工作！謝謝！快速的問題 - 如果我想將這些矩形添加到容器中，並且我想調用矩形上的某些東西（我正在寫一個函數來爲每個矩形添加一個事件監聽器），我可以通過名稱調用它們嗎？ – MLE

-1

我只是想指出一個小竅門，你...

你有這樣的：

div.style.width = width + "px"; 
div.style.height = height + "px"; 
div.style.left = width * j + "px"; 
div.style.top = height * i + "px"; 
div.style.position = "absolute"; 
div.style.backgroundColor = "blue";

我認爲可以這樣寫ES6 ：

div.style.cssText = `width: ${width + "px"}; 
         height: ${height + "px"}; 
         left: ${width * j + "px"}; 
         top: ${height * i + "px"}; 
         position: absolute; 
         backgroundColor: blue;`

據我所知.cssText =將取代現有內嵌...

要追加現有內嵌使用.cssText + =

我敢肯定，這將幫助你在長期運行。

來源

2016-12-06 02:55:58

在javascript中使用for循環添加HTML矩形

回答

相關問題