在 JavaScript 中创建图例

Question

如何使用 JavaScript 根据数组列表创建如下所示的颜色框？

Answer 1

您可以将数组键用作框id，然后使用该键指向的值以编程方式设置背景颜色 on colorList。

请运行该代码段以了解其工作原理。

var colorList = {t1: 'red', t2: 'green', t3: 'blue'};

colorize = function(colorList) {
    var container = document.getElementById('container');
  
    for (var key in colorList) {
        var boxContainer = document.createElement("DIV");
        var box = document.createElement("DIV");
        var label = document.createElement("SPAN");

        label.innerHTML = key;
        box.className = "box";
        box.style.backgroundColor = colorList[key];

        boxContainer.appendChild(box);
        boxContainer.appendChild(label);

        container.appendChild(boxContainer);

   }
}

colorize(colorList);

.box {
  display: inline-block;
  height: 20px;
  width: 20px;
  border: 2px solid;
}

<div id="container">
</div>

我希望有帮助：D