用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>

在这种情况下，您也可以从id="icon"标签中删除<i>。此外，如果您愿意，还有基于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，以便它将是一个唯一的名称