在运行时交换字体图标-我试图在运行时使用以下JavaScript代码交换字体图标，但似乎无法实现。
我从本地文件夹而不是存储库中调用Font Awesome。我已经确认正在加载字体。
<head>
<style>
body {
padding:10% 3% 10% 3%;
text-align:center;
}
img {
height:140px;
width:140px;
}
h1 {
color: #32a852;
}
.mode {
float:right;
}
.change {
cursor: pointer;
border: 1px solid #555;
border-radius: 40%;
width: 20px;
text-align: center;
padding: 5px;
margin-left: 8px;
}
.dark {
background-color: #222;
color: #e6e6e6;
}
</style>
</head>
<body>
<div class="mode">
Dark mode:
<span class="change">OFF</span>
</div>
<script>
$( ".change" ).on("click", function() {
if( $( "body" ).hasClass( "dark", "fa-solid fa-moon")) {
$( "body" ).removeClass( "dark" );
$( ".change" ).text( "OFF" );
} else {
$( "body" ).addClass( "dark", "fa-solid fa-sun" );
$( ".change" ).text( "ON" );
}
});
</script>
</body>
您可以使用纯js:来完成此操作
const change = document.querySelector('.change')
change.addEventListener('click',function(){
change.classList.toggle('dark')
change.classList.toggle('fa-solid-fa-moon')
change.classList.toggle('fa-solid-fa-sun')
if (change.textContent === 'OFF') {
change.textContent = 'ON'
} else {
change.textContent = 'OFF'
}
})