如何为div中的每个元素设置随机边框颜色

Question

我一直在研究标记图像的代码。我能够插入标签，并且为每个插入的标签创建一个小框，并且标签名将显示在其中。我想做的是为每个创建的盒子使用不同的颜色

css：

.inputtag>i {
    margin-right: 4px;
    } 
.inputtag {
        border-radius: 4px;
        border: 1px solid skyblue;
        color: #000;
        padding: 2px 8px;
        width: max-content;
        text-align: center;
        cursor: pointer;
        margin: 4px 4px;
        float: left;
  }

JavaScript：

   var html = "<div class='inputtag'><i class='fa fa-eye' aria-hidden='true'></i><i class='fa fa-trash-alt' aria-hidden='true'></i><span>" + input + "</span><input type='hidden' name='tag_name[]' value='" + input + "'></div>";
   $('.tags').append(html);

下面我附上了我的问题的图片：

如果看到图像，则可以看到两个框的边框颜色相同（天蓝色）。我希望每个盒子都有不同的颜色。

有人可以指导我怎么做

Answer 1

给他们所有相同的类名，那么您可以使用querSelectorAll来找到他们 然后使用forEach方法分配随机生成的颜色；

document.querySelectorAll(".test").forEach(el => el.style.borderColor ="#"+((1<<24)*Math.random()|0).toString(16));

.test{
   border:1px solid;
}

<div class="test">test1</div>
<div class="test">test2</div>
<div class="test">test3</div>

Answer 2

您对各个框使用不同的类，并在CSS中分配不同的颜色。