c# - 如何使用用户选择的背景颜色覆盖图标的默认背景？

Question

我有一个图标，它的默认颜色是白色，周围是蓝色背景。如果用户未选择背景颜色，则此默认背景颜色保持原样。但是，如果用户确实为例如:(这里是他们的选项:粉色、灰色、橙色)选择了新的背景颜色，则默认背景颜色应该被用户选择的新颜色覆盖。用户将通过具有 'iconBackground' 框的内容管理系统选择背景颜色，用户可以在其中选择他们想要的颜色。

我的问题是，当用户选择背景颜色时，如何覆盖默认背景颜色(蓝色)？这是具有 Razor 和 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>