Javascript 不对加载的元素进行操作

Question

我试图理解网格布局，所以我编写了一些 js 来递归地为页面上的每个元素着色以显示每个网格图 block 。

问题

每隔几次刷新一些瓷砖就不会变色。我认为这是某种加载错误，所以我没有立即运行代码，而是决定在 window.onload 中运行它。这并没有改变任何东西。

我什至写了一段代码将未着色的元素打印到控制台。我在绘制单个元素的同一循环中运行该代码，并期望不会记录任何内容，令我惊讶的是生成了颜色，创建了元素，但元素仍然没有着色!

请求

谁能告诉我这是怎么回事？它在这个应用程序中不是很重要，但这违背了我对 js 如何运行的所有了解，这将有助于扩展我的理解。谢谢!

附言演示

我添加了这个小演示，这里也出现了问题。您需要运行代码几次才能看到错误，我写了另一段代码将无色元素打印到控制台，这样您就不会错过它!

let colorize = (elements) => {
  for (let e of elements) {
    let color = '#' + Math.floor(Math.random() * 16777215).toString(16);
    e.style["background-color"] = color;
    checkcolor(e, color);
    colorize(e.children);
  }
}
let checkcolor = (e, color) => {
  if (!e.style['background-color']) {
    console.log(e, color);
  }
}
window.onload = () => colorize(document.querySelector("html").children);

body {
  height: calc(100vh - 3px);
  display: grid;
  grid-template-rows: repeat(5, minmax(10px, 100px));
  /* grid-template-columns: 1; */
  grid-auto-flow: row;
}

<div>11</div>
<div>22</div>
<div>33</div>
<div>44</div>
<div>55</div>

Answer 1

这是 console.log 结果之一的示例:

<div>55</div> #43b0f

这应该让您明白 - 生成的字符串只有 5 个字符(或更少)，而不是 6 个，因此它不是有效的十六进制颜色。当生成的数字有前导零时，就会发生这种情况。

修复它的一种方法是 padStart 带零的数字:

const colorize = (elements) => {
  for (let e of elements) {
    let color = '#' +
      Math.floor(Math.random() * 16777215)
      .toString(16)
      .padStart(6, '0');
    e.style["background-color"] = color;
    colorize(e.children);
  }
}
colorize(document.querySelectorAll('div'));

body {
  height: calc(100vh - 3px);
  display: grid;
  grid-template-rows: repeat(5, minmax(10px, 100px));
  /* grid-template-columns: 1; */
  grid-auto-flow: row;
}

<div>11</div>
<div>22</div>
<div>33</div>
<div>44</div>
<div>55</div>