使用功能永久更改按钮的图像（正常+按下）

Question

我想使用 javascript 中的函数更改按钮的背景图像及其 :active 形式。该函数执行一次，但这应该永久更改两个背景图像。为了更好地理解，下面是代码：

按钮执行点击计数功能。

<button onclick="counting()">

这个点击计数函数在一定数量的点击后执行我要求的函数：

var clicks = 0;
function counting() {
  clicks++;
  document.getElementById("clicks").innerHTML = clicks;   
      if (clicks === 5) {      
      requestedFunction();

按钮的背景图片在 CSS 中找到：

button { background-image:url(button_normal.png);
background-size: cover;

还有它的 :active 形式：

button:active { background-image:(button_pressed.png);
background-size: 100%;

由于按钮在激活时会更改其图像（您单击了按钮），因此背景大小为封面或 100%。

如何将“button_normal.png”和“button_pressed.png”替换为例如“giraffe.png”和“pig.png”？

Answer 1

如果可以这样：

• 为您的按钮添加初始类
• 创建两个类，一个用于初始状态，一个用于修改状态
• 用js当你想改变按钮时去掉初始类并设置修改后的类

<button class="myButton initial">My Button!</button>

.initial {
  background-image:url(button_normal.png);
  background-size: 100%;
}

.initial:hover {
  background-image:url(button_pressed.png);
  background-size: 100%;
}

.modified {
  background-image:url(giraffe.png);
  background-size: 100%;
}

.modified:hover {
  background-image:url(pig.png);
  background-size: 100%;
}

  document.querySelector(".myButton").classList.remove('initial').add("modified");