使用 Js 更改带有背景的文本颜色

Question

当用户单击它时，我正在创建带有锚标记的竖起大拇指按钮，它的背景和字体颜色会发生变化，但问题是它正在改变背景颜色而不是字体颜色：

function changeColor() {
  document.getElementById('icon').style.color = "#fff"; // forecolor
  document.getElementById('icon').style.background = "#008000"; // backcolor
}

.thumb-up {
  border: 5px solid green;
  width: 42%;
  padding: 30px 6px 34px 32px;
  border-radius: 100%;
}

<a onclick="changeColor()" href="#">
  <div id="icon" class="thumb-up">
    <i id="icon" class="fas fa-thumbs-up fa-5x"></i>
  </div>
</a>

问题：我想在点击时更改文本和背景颜色。

Answer 1

你有两次id="icon"，这在 HTML 中是一种犯罪，这就是它不起作用的原因。将其更改为 class 或为 id 提供不同的值。

<div id="icon" class="thumb-up">
  <i id="icon" class="fas fa-thumbs-up fa-5x"></i>
  <!--^^^^^^^^ -->
</div>

在这种情况下，您不妨从<i> 标记中删除id="icon"。此外，如果您愿意的话，还有基于 CSS 的解决方案。它们更有效。

OP 的澄清

我使用了以下代码。另外，你不应该使用fas，我改为fa。我最初得到这个：

点击后，我得到这个：

这是我使用的完整代码：

function changeColor() {
  document.getElementById('icon').style.color = "#fff"; // forecolor
  document.getElementById('icon').style.background = "#008000"; // backcolor
}

.thumb-up {
  border: 5px solid green;
  width: 42%;
  padding: 30px 6px 34px 32px;
  border-radius: 100%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<a onclick="changeColor()" href="#">
  <div id="icon" class="thumb-up">
    <i class="fa fa-thumbs-up fa-5x"></i>
  </div>
</a>

Answer 2

不要使用相同的id 名称。 ID 名称应该是唯一的。

您的代码在更改后运行良好。

function changeColor() {
  document.getElementById('icons').style.color = "#fff"; // forecolor
  document.getElementById('icon').style.background = "#008000"; // backcolor
}

.thumb-up {
  border: 5px solid green;
  width: 42%;
  padding: 30px 6px 34px 32px;
  border-radius: 100%;
  text-align: center;
}

<a onclick="changeColor()" href="#">
  <div id="icon" class="thumb-up">
    <i id="icons" class="fas fa-thumbs-up fa-5x">&#x2713;</i>
  </div> 
</a>

我已将 fa-icon 的 id 名称更改为 icons，使其成为唯一名称