javascript - DOM 为子 Javascript 分配一个 id

Question

我创建了一个带有 div、class 和 id 的网格。我想随机创建一个黄色方 block ，并且想分配一个 id= 'yellowSquare' 我该怎么做？

var grid = document.getElementById("grid-box");
for (var i = 1; i <= 100; i++) {
  var square = document.createElement("div");
  square.className = 'square';
  square.id = 'square' + i;
  grid.appendChild(square);
}

var playerOne = [];

while (playerOne.length < 1) {
  var randomIndex = parseInt(99 * Math.random());


  if (playerOne.indexOf(randomIndex) === -1) {
    playerOne.push(randomIndex);

    var drawPone = document.getElementById('square' + randomIndex);
    drawPone.style.backgroundColor = 'yellow';
  }
}

#grid-box {
width: 400px;
height: 400px;
margin: 0 auto;
font-size: 0;
position: relative;
}

#grid-box>div.square {
font-size: 1rem;
vertical-align: top;
display: inline-block;
width: 10%;
height: 10%;
box-sizing: border-box;
border: 1px solid #000;
}

<div id="grid-box"></div>

我是 Javascript/jQuery 新手。任何帮助都感激不尽 !谢谢

Answer 1

您的问题有两个选项。您可以更改已从代码创建的黄色方 block 的 id，也可以在方 block 内创建一个子元素，它看起来与您当前的解决方案相同。创建一个新的子元素将允许您保留网格的数字 id 模式:

更改 ID:

var element = document.getElementById('square' + randomIndex)
element.id = "yellowSquare";

在里面添加新元素:

var node = document.createElement("DIV");
node.id = "yellowSquare";
node.style = "background-color:yellow;height:100%;width:100%;";
var element = document.getElementById('square' + randomIndex)
element.appendChild(node);

我将 div 子项的样式设置为 100% 宽度和高度，因为它没有内容，如果未指定任何内容，将获得 0 值。这应该使它填充父容器。

还有多种其他方法可以实现相同的结果，例如使用 JQuery。