用css 实现点击按钮后 原来显示的字体图标变为另一个新的字体图标
时间: 2024-05-04 15:21:54 浏览: 18
可以使用CSS的伪元素(pseudo-element)和伪类(pseudo-class)实现这个效果。
首先,需要在HTML中添加一个按钮和一个显示字体图标的元素,例如:
```html
<button id="changeIconBtn">Change Icon</button>
<div id="icon" class="original-icon">A</div>
```
其中,按钮的id为"changeIconBtn",显示字体图标的元素的id为"icon",并且初始状态下它的class为"original-icon",表示显示的是原来的字体图标。
接下来,使用CSS为这些元素添加样式。首先,需要为"icon"元素设置字体和字体大小:
```css
#icon {
font-family: "Font Awesome 5 Free"; /* 字体图标库的名称 */
font-size: 24px;
}
```
然后,使用伪元素和伪类为"icon"元素添加两个不同的字体图标。在初始状态下,使用:before伪元素显示第一个字体图标;在按钮点击后,使用:after伪元素显示第二个字体图标。同时,为了实现点击按钮后字体图标的变换效果,可以使用:checked伪类和相邻兄弟选择器(adjacent sibling selector)来实现:
```css
#icon:before {
content: "\f007"; /* 第一个字体图标的Unicode编码 */
}
#changeIconBtn:checked + #icon:after {
content: "\f008"; /* 第二个字体图标的Unicode编码 */
}
.original-icon:before {
content: "\f007"; /* 在初始状态下仍显示第一个字体图标 */
}
.new-icon:after {
content: "\f008"; /* 在按钮点击后显示第二个字体图标 */
}
```
最后,为按钮添加点击事件,当它被点击时,将"icon"元素的class从"original-icon"变为"new-icon",从而触发字体图标的变换效果:
```javascript
var changeIconBtn = document.getElementById("changeIconBtn");
var icon = document.getElementById("icon");
changeIconBtn.addEventListener("click", function() {
icon.classList.toggle("original-icon");
icon.classList.toggle("new-icon");
});
```
这样就可以实现一个简单的点击按钮后字体图标变换的效果了。完整的代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>Change Icon Example</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<style>
#icon {
font-family: "Font Awesome 5 Free";
font-size: 24px;
}
#icon:before {
content: "\f007";
}
#changeIconBtn:checked + #icon:after {
content: "\f008";
}
.original-icon:before {
content: "\f007";
}
.new-icon:after {
content: "\f008";
}
</style>
</head>
<body>
<button id="changeIconBtn">Change Icon</button>
<div id="icon" class="original-icon">A</div>
<script>
var changeIconBtn = document.getElementById("changeIconBtn");
var icon = document.getElementById("icon");
changeIconBtn.addEventListener("click", function() {
icon.classList.toggle("original-icon");
icon.classList.toggle("new-icon");
});
</script>
</body>
</html>
```