Question

使用 Js 改变文本颜色和背景

2018-12-27

102

javascript html css

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

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 ，以便它是一个唯一的名称