用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

您有两次import sys from PyQt5 import QtCore, QtWidgets from PyQt5.QtWidgets import QMainWindow, QLabel, QGridLayout, QWidget from PyQt5.QtCore import QSize class HelloWindow(QMainWindow): def __init__(self): QMainWindow.__init__(self) self.setMinimumSize(QSize(640, 480)) self.setWindowTitle("Hello world") centralWidget = QWidget(self) self.setCentralWidget(centralWidget) gridLayout = QGridLayout(self) centralWidget.setLayout(gridLayout) title = QLabel("Hello World from PyQt", self) title.setAlignment(QtCore.Qt.AlignCenter) gridLayout.addWidget(title, 0, 0) if __name__ == "__main__": app = QtWidgets.QApplication(sys.argv) mainWin = HelloWindow() mainWin.show() sys.exit( app.exec_() ) ，这在HTML中是一种犯罪，这就是它不起作用的原因。将其更改为id="icon"或为class提供不同的值。

id

在这种情况下，您也可以从<div id="icon" class="thumb-up"> <i id="icon" class="fas fa-thumbs-up fa-5x"></i> <!--^^^^^^^^ --> </div> 标记中删除id="icon"。另外，如果您愿意的话，还有基于CSS的解决方案。它们更有效。

OP中的说明

我使用了以下代码。另外，您不应使用<i>，而我已更改为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%;
}

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，以使其成为唯一名称