如何为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);

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

如果您看到图像，您可以看到两个框具有相同的边框颜色（天蓝色）。 我想为这些盒子中的每一个提供不同的 colors。

有人可以指导我如何做到这一点

Answer 1

给它们所有相同的 class 名称，然后您可以使用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

您为各个盒子使用不同的 class 并在 css 中分配不同的颜色。