时间戳

首页 > 解决方案 > 使用功能永久更改按钮的图像（正常+按下）

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

问题描述

我想使用 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”？

标签： javascripthtmlcssimagebutton

解决方案

如果可以这样做：

  • 将初始类添加到您的按钮
  • 创建两个类，一个用于初始状态，一个用于修改状态
  • 用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");

推荐阅读