如何用JavaScript配合CSS实现点击变色？

要使用JavaScript配合CSS实现按钮点击时的颜色变化，你可以这样做：

首先，在HTML中创建一个按钮并添加一个ID，以便后续引用：

<button id="myButton" onclick="changeColor()">点击我</button>

然后，在CSS中定义一种默认颜色和另一种将应用于点击状态的颜色：

#myButton {
  background-color: #007BFF; /* 默认颜色 */
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

关键在于添加了`transition`属性，它会使背景颜色的变化过程平滑过渡。

接下来，编写JavaScript函数`changeColor()`，当按钮被点击时，改变它的背景颜色：

function changeColor() {
  var button = document.getElementById("myButton");
  if (button.style.backgroundColor === "rgb(0, 123, 255)") { // 检查当前颜色是否已变为其他颜色
    button.style.backgroundColor = "#fff"; // 如果是，恢复原始颜色
  } else {
    button.style.backgroundColor = "#007BFF"; // 否则，改变为点击颜色
  }
}

这样，当用户点击按钮时，按钮会从默认颜色切换到点击颜色，再次点击则恢复回默认颜色。