Gera11
@Gera11

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

У меня на странице есть много 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. Но цвета должны быть одинаковые
  • Вопрос задан
  • 62 просмотра
Пригласить эксперта
Ответы на вопрос 1
hzzzzl
@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};`
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы