单击按钮时更改图标 - Html

在页面中添加按钮是非常常见的，但是如何在点击按钮时更改图标可能并不是很明确。幸运的是，HTML提供了几种方法来实现这个任务。

方法1：使用<button>标签和JavaScript

该方法需要使用JavaScript来更改图标。这里我们通过给按钮添加onclick事件处理程序来实现。

首先，让我们在HTML中添加一个按钮和一个带有填充图标的<i>标签。在标签中添加id属性，以便我们可以在JavaScript中引用它们。

<button id="myButton">点击我</button>
<i id="myIcon" class="fa fa-search"></i>

接下来，在JavaScript中编写函数以更改图标。以下代码将更改填充图标为旋转图标：

function changeIcon() {
  var icon = document.getElementById("myIcon");
  icon.classList.remove("fa-search");
  icon.classList.add("fa-spinner", "fa-spin");
}

最后，将函数绑定到按钮的onclick事件处理程序中。

<button id="myButton" onclick="changeIcon()">点击我</button>
<i id="myIcon" class="fa fa-search"></i>

方法2：使用<input>标签和CSS

该方法使用CSS来更改图标。我们将使用<input>标签而不是<button>标签。

首先，在HTML中添加输入字段和一个带有图标的<span>标签。将它们包装在<label>标签中。我们将在标签中添加一个自定义属性，称为data-icon，以设置它们的初始和更改后的图标。

<label for="myInput">
  <input type="text" id="myInput"> Input Field
  <span class="icon" data-icon="search"></span>
</label>

接下来，在CSS中指定每个状态下的图标。以下是一个例子：

.icon[data-icon="search"]::before {
  content: "\f002";  /* FontAwesome search icon */
}

.icon[data-icon="spinner"]::before {
  content: "\f110";  /* FontAwesome spinner icon */
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

最后，通过JavaScript在<span>标签的自定义属性中更改图标值。以下是更改为旋转图标的示例：

document.querySelector('.icon').setAttribute('data-icon', 'spinner');

结论

以上方法都可以让您在单击按钮时更改图标。您可以通过选择最适合您的解决方案来实现它。在这里，我们为您提供了使用JavaScript和CSS的两种不同的解决方案。