button点击后背景颜色变化后保持不变怎么写

在JavaScript中，如果你想让按钮在点击后改变背景颜色并保持该颜色直到用户再次点击或其他操作改变它，可以使用CSS样式结合JavaScript事件处理。这里是一个简单的示例：

HTML部分：

<button id="myButton">点击我</button>

CSS部分（假设初始颜色是白色）：

#myButton {
  background-color: white;
  transition: background-color 0.5s; /* 添加过渡效果 */
}

JavaScript部分：

document.getElementById('myButton').addEventListener('click', function() {
  this.style.backgroundColor = 'red'; // 改变背景颜色到红色
});

当按钮被点击时，背景颜色会变为红色，并由于`transition`属性设置的0.5秒过渡效果，颜色会平滑地从白色过渡到红色。如果想在再次点击恢复白色，你可以添加一个状态管理或者在另一个函数中处理这个反转过程。

相关问题

el-button点击后文字颜色变化

您可以使用 `:active` 和 `:visited` 伪类来改变 `<el-button>` 元素的文本颜色。例如：

.el-button:active,
.el-button:visited {
  color: red;
}

这将使点击 `<el-button>` 元素后的文本颜色变为红色。您可以根据需要更改颜色值。

el-button点击后颜色变化

可以通过为按钮添加 `:class` 或 `:style` 属性来控制按钮的样式。下面是一个例子，当按钮被点击时，它的背景色将变为灰色：

<el-button @click="changeColor" :style="{ backgroundColor: bgColor }">点击我</el-button>

data() {
  return {
    bgColor: '#409EFF'
  }
},
methods: {
  changeColor() {
    this.bgColor = '#999'
  }
}

在上面的代码中，我们为按钮绑定了一个点击事件 `@click="changeColor"`，当按钮被点击时，`changeColor` 方法将被调用，其中 `bgColor` 的值将被更新为灰色。我们使用 `:style` 属性将 `bgColor` 作为按钮背景色的值来绑定。这样，当 `bgColor` 的值发生变化时，按钮的背景色也会相应地发生变化。