在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矩形

回答

相关问题