用js 实现点击按钮后 原来显示的字体图标变为另一个新的字体图标
时间: 2024-05-16 09:17:05 浏览: 12
可以通过以下步骤来实现:
1. 在HTML文档中定义一个按钮和需要修改字体图标的元素。例如:
```html
<button onclick="changeIcon()">点击修改图标</button>
<i id="icon" class="fa fa-star"></i>
```
2. 在CSS文件中定义两个字体图标的类,例如:
```css
.fa-star {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f005";
}
.fa-heart {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f004";
}
```
3. 在JavaScript文件中编写函数来切换字体图标。例如:
```javascript
function changeIcon() {
var icon = document.getElementById("icon");
if (icon.classList.contains("fa-star")) {
icon.classList.remove("fa-star");
icon.classList.add("fa-heart");
} else {
icon.classList.remove("fa-heart");
icon.classList.add("fa-star");
}
}
```
4. 当用户单击按钮时,调用函数以切换字体图标。例如:
```html
<button onclick="changeIcon()">点击修改图标</button>
```
这样,当用户单击按钮时,字体图标将切换为另一个图标。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)