我是 JavaScript 新手。為什么我的按鈕不會從太陽顏色變為月亮顏色并且其他作業正常，只是不會改變圖示。
let menu = document.querySelector('#menu-icon');
let navbar = document.querySelector('.nav-menu');
menu.onclick = () => {
menu.classList.toggle('fa-xmark');
navbar.classList.toggle('active');
};
let themeButton = document.getElementById('theme-button');
themeButton.onclick = () => {
themeButton.classList.toggle('fa-moon');
if (themeButton.classList.contains('fa-moon')) {
document.body.classList.add('active');
} else {
document.body.classList.remove('active');
}
};<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="nav-right">
<div><i class="fa-solid fa-bars" id="menu-icon"></i></div>
<div><i class="fa-solid fa-sun" id="theme-button"></i></div>
</div>uj5u.com熱心網友回復：
因為你有兩個類fa-sun和fa-moon. 規則必須使它如此fa-sun獲勝。而在你的另一個類中，你添加的類獲勝。
您不應該依賴樣式表中類的順序，因此您可能應該只切換兩個類。
let menu = document.querySelector('#menu-icon');
let navbar = document.querySelector('.nav-menu');
menu.onclick = () => {
menu.classList.toggle('fa-xmark');
menu.classList.toggle('fa-bars');
// navbar.classList.toggle('active');
};
let themeButton = document.getElementById('theme-button');
themeButton.onclick = () => {
themeButton.classList.toggle('fa-moon');
themeButton.classList.toggle('fa-sun');
if (themeButton.classList.contains('fa-moon')) {
document.body.classList.add('active');
} else {
document.body.classList.remove('active');
}
};<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="nav-right">
<div><i class="fa-solid fa-bars" id="menu-icon"></i></div>
<div><i class="fa-solid fa-sun" id="theme-button"></i></div>
</div>uj5u.com熱心網友回復：
我已經測驗了您的代碼，并且更改類似乎作業正常。
你是如何處理圖示的？您可能應該在 CSS 類中為太陽/月亮圖示使用背景影像。這樣當你按下按鈕時它會改變：
.fa-sun {
background-image: url('path/to/sun-icon.png');
}
.fa-moon {
background-image: url('path/to/moon-icon.png');
}
在啟用 sun 類時，請務必使用 Javascript 洗掉 moon 類，反之亦然，這樣它們就不會同時處于活動狀態。
uj5u.com熱心網友回復：
您正在fa-moon單擊添加/洗掉類。但是您還需要同時洗掉/添加fa-sun類。如果兩個類名都存在，則將使用具有更高特異性的類。
themeButton.onclick = () => {
//This will remove `fa-moon` class if it's already there, add if not.
themeButton.classList.toggle('fa-moon');
//You need to do the same for `fa-sun` class. Otherwise, the class never gets removed
themeButton.classList.toggle('fa-sun');
if (themeButton.classList.contains('fa-moon')) {
document.body.classList.add('active');
} else {
document.body.classList.remove('active');
}
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/486667.html
標籤：javascript html css