Как установить цвет границы для каждого элемента внутри div?

Question

Я работал над кодом для пометки изображений. Мне удалось вставить теги, и для каждого вставленного тега создается небольшое поле, внутри которого будет отображаться имя тега. Я хотел бы иметь разные цвета для каждого созданного блока.

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

var theColors = []
document.querySelectorAll(".inputtag").forEach((el, idx) =>
    theColors.push("#" + ((1 << 24) * Math.random() | 0).toString(16)); el.style.borderColor = theColors[idx]
)

.inputtag>i {
    margin - right: 4 px;
}

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

В приведенном выше коде Javascript я пытался получить другой цвет границы для элементов внутри div, но цвет продолжает меняться после каждой новой записи. Я приложил изображения ниже, чтобы лучше это объяснить.

Изображение 1:

In this image 1 , u can see the elements with two different colors. These colors change when i add a new element. i.e., for each element added inside the Div, the border color for each element keep changing.

Image 2 :

введите описание изображения здесь

Изображение 2 показывает изменение цвета границы для элементов. Я бы хотел иметь разные фиксированные цвета для каждого элемента внутри Div, чтобы они не меняли цвет при добавлении нового элемента.

Может ли кто-нибудь помочь мне с этой проблемой.

Answer 1

Попробуйте следующее:

        var render = document.querySelector('#tags');
        var btnAdd = document.querySelector('#btn-add');
        var tags = [];

        btnAdd.addEventListener('click', () => {
            var nameTag = document.querySelector('#name-tag');
            var color = ((1 << 24) * Math.random() | 0).toString(16);
            render.innerHTML += `
                <div class="tag" style="border-color: #${color};">
                    ${nameTag.value}
                </div>
            `;
        });

        .tag {
            border-radius: 4px;
            border: 2px solid skyblue;
            color: #000;
            padding: 2px 8px;
            margin: 4px 4px;
            float: left;
        }

    <input type="text" id="name-tag" placeholder="name tag...">
    <button id="btn-add">Add</button>
    <hr>
    <div id="tags">
    </div>

Answer 2

Вы можете сохранить цветовой код для каждого из ваших тегов и извлекать их всякий раз, когда вам нужно показать эти теги. Потому что, если вы обновите sh страницу, это также сбросит все цвета.

Или вы можете использовать массив цветовых кодов, чтобы вы всегда могли последовательно назначать эти цвета тегам.

Хотя я бы последовал первому подходу.