Javascript 元素中未显示颜色变化？

我正试图得到一个网格工作，以便我可以使用它作为画布。但是，当我尝试更改元素的颜色作为测试时，什么都没有显示。然而，当我给这个类一个虚线边框时，它不适用于纯色，它只会变成黑色，这是我试图改变的颜色。但是，如果删除边框，颜色也会消失。 HTML:

Js:

这就是isI认为的问题所在：

for (i = 0; i < count; i++)
{
  document.getElementById("grid" + i).style.backgroundColor = "red";
}

---

您可以添加内容，也可以设置宽度和高度

.box{border: 1px solid; display: inline-block; width: 10px; height: 10px;}

---

请看《行动》

我怀疑在你的div里放些东西可能会有帮助-试着包括一个我刚要说的！由于某些原因，div喜欢一点内容它可以工作，但它完全超出了分配的区域。如何解决这个问题？我的createDrawingArea函数有问题吗？它还破坏了颜色右侧的功能。当你用鼠标点击这些区域时，中间的区域应该被改变为右边的颜色。我删除了我的答案，我没有正确地理解要点。

for (i = 0; i < count; i++)
{
  document.getElementById("grid" + i).style.backgroundColor = "red";
}

.box{border: 1px solid; display: inline-block; width: 10px; height: 10px;}