在運行時交換字體真棒圖示 - 我正在嘗試使用以下 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>
uj5u.com熱心網友回復：
你可以用純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'
}
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/524192.html