Как установить цвет фона с помощью JavaScript

#javascript #css #lit-element

#javascript #css #освещенный элемент

Вопрос:

Я разрабатываю свое веб-приложение с использованием lit-element. У меня есть список элементов, каждый из которых имеет свой собственный цвет. Я отображаю их следующим образом:

 render() {
  return html`
  <div class='container'>
    ${this.items.map(item => html`
    <div class='item'>
      item.data
    </div>`
  </div>`
}

Каждый элемент содержит data — некоторую информацию об элементе и color — цвет фона этого элемента.

Я знаю несколько способов задать цвет bg для каждого элемента:

<div class='item' style='background-color: ${item.color}'>
<div class='item ${item.colorID}'>
<div class='item' onload=${this.setColor} data-color=${item.color}> функция, которая задает цвет как event.target.style.....

Ни один из этих методов не так хорош, как хотелось бы:

Неправильное кодовое решение.
Ограничения на количество цветов
Слишком много работы только для установки bg.

Итак, есть ли какой-нибудь хороший метод для установки цвета фона таких элементов, как этот?

1. Что для вас значит «1. Неправильное кодовое решение?» Что плохого в 1?

2. Это то, что сказал мне мой учитель.

3. Плохой учитель, который не предоставил достаточного контекста. 🙂 Я также где-то читал некоторое время назад, что встроенные стили были плохими. Но если я подумаю сам , я бы сказал, что в данном случае это совершенно нормально. Как только у вас возникнет реальная проблема с этим решением, вы все равно сможете его изменить.

Ответ №1:

С помощью чистого js

 document.querySelector('.container').style.backgroundColor = "red";

Вы должны писать длинные css-реквизиты с использованием camel case