如何用用户选择的背景色覆盖图标的默认背景？

Question

我有一个图标，默认颜色是白色，周围带有蓝色背景。如果用户未选择背景色，则默认的背景色保持不变。但是，如果用户确实为例如：（以下选项为：粉红色，灰色，橙色）选择新的背景色，则默认背景色应替换为用户选择的新颜色。用户将通过具有'iconBackground'框的内容管理系统进行背景颜色选择，用户可以在其中选择所需的颜色。

我的问题是，当用户选择背景颜色时，如何覆盖默认的背景颜色（蓝色）？这是具有剃刀和CSS的代码：https://jsfiddle.net/cliffeee/bjhvpf7q/9/。我尝试过的是，首先确认myIcon和iconBackground字段不为空。如果它们不为空，则输出其值，但是，我不确定如何用具有新背景色的iconBackground值覆盖默认背景色。

Answer 1

此代码段说明了逻辑，您只需删除选择并将@iconBackground变量替换为CSS类名

const selectElement = document.querySelector('#colorSelect');

selectElement.addEventListener('change', (event) => {
  var icon = document.querySelector('.tinyicon');
  var newClass = event.target.value;
  icon.className = "tinyicon "+newClass;
});

.tinyicon {
  display: block;
  float: left;
  color: white;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  padding: 6px;
}
    
.default{
  background: blue;
}

.green{
  background: green;
}

.red{
  background: red;
}

<span><i title="Icon" class="tinyicon default"></i> This is my content</span>
<select id="colorSelect">
  <option value="default">Default</option>
  <option value="green">Green</option>
  <option value="red">Red</option>
</select>