Как сделать автоматическую генерацию определенных css атрибутов для div?

Question

[Gera11]

У меня на странице есть много div блоков, все они одинаковые.
Состоит блок из нескольких дочерних div, вот так:

<div class="card">
<div class="card-header">шапка</div>
</div>

Как сделать так, чтобы по добавлению к "card" какого-нибудь data атрибута
У блока card менялся цвет бордера border-color и фоновой цвет card-header блока?
Автоматически генерировался цвет и задавался border-color для div=card и автоматически генерировался background для блока card-header ?
Пример так должно получится:

<div class="card" data="randomcolor" style="border-color:#552051;">
<div class="card-header" style="background:#552051;">шапка</div>
</div>

style дописывается тем у кого прописан data атрибут randomcolor. Но цвета должны быть одинаковые

Answer 1

[hzzzzl]

по добавлению к "card" какого-нибудь data атрибута

наверно проще это обернуть какой-нибудь функцией, которая будет и добавлять дата-атрибут, и заодно добавлять стили для элементов.. что-то типа

function addRandomColor(card) {
  rgb = `(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`
  card.style = `border-color: rgb${rgb};`
  // тут найти card-header принадлежащий этой карточке
  cardHeader.style = `background: rgb${rgb};`
}