如何通过JavaScript设置背景颜色

问题描述

我正在使用lit-element开发我的Web应用程序。我有一个项目列表，每个项目都有自己的颜色。我将它们渲染如下：

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

每个项目都包含data-有关该项目的一些信息，以及color-该项目的背景色。

我知道几种设置每个元素的背景色的方法：

1. <div class='item' style='background-color: ${item.color}'>
2. <div class='item ${item.colorID}'>
3. <div class='item' onload=${this.setColor} data-color=${item.color}> +将颜色设置为event.target.style.....
的函数

这些方法都没有我想要的那么好：

1. 错误代码决定。
2. 限制颜色数量
3. 仅需设置背景就能完成很多工作。

那么，有什么好的方法来设置像这样的元素的背景颜色吗？

解决方法

使用纯js

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

您会用骆驼套写长的CSS道具