时间戳

首页 > 解决方案 > 如何为div内的每个元素设置随机边框颜色

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

问题描述

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

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);

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

在此处输入图像描述

如果您看到图像，您可以看到两个框具有相同的边框颜色（天蓝色）。我想为每个盒子设置不同的颜色。

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

标签： javascripthtmlcss

解决方案

给他们所有相同的类名，然后你可以用它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>

推荐阅读