TA貢獻(xiàn)1816條經(jīng)驗(yàn) 獲得超4個贊
為什么不調(diào)整你的 css，這樣你只改變一個？保持衛(wèi)生。
function toggleDark() {
const body = document.querySelector('body');
if (body.classList.contains('dark')) {
body.classList.remove('dark');
} else {
body.classList.add('dark');
}
}
document.querySelector('#darkmode').addEventListener('click', toggleDark);
body {
background-color: #c0c0c0;
}
body.dark {
background-color: #272727;
}
.container1 {
width: fit;
background-color: lightblue;
height: fit;
color: green;
}
body.dark .container1 {
width: fit;
background-color: yellow;
height: fit;
color: red;
}
.container2 {
width: fit;
background-color: black;
height: fit;
color: white;
}
body.dark .container2 {
width: fit;
background-color: white;
height: fit;
color: black;
}
.button1 {
background-color: #c0c0c0;
color: black;
border-radius: 25px;
border: 1px solid black
}
body.dark .button1 {
background-color: #white;
color: black;
border-radius: 25px;
border: 1px solid black
}
<div class="container1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div><br />
<div class="container2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div><br />
<button id="darkmode" class="button1">?? Lights Off!!</button>
TA貢獻(xiàn)1826條經(jīng)驗(yàn) 獲得超6個贊
選擇按鈕并監(jiān)聽事件click。每當(dāng)您單擊一個按鈕時，您都會想要調(diào)用一個函數(shù)，該函數(shù)循環(huán)遍歷您指定的元素并用于向這些元素classList.toggle('dark')添加或刪除.dark類。
const button = document.querySelector('#darkmode');
const elements = document.querySelectorAll('body, .container1, .button1');
button.addEventListener('click', () => {
for (const element of elements) {
element.classList.toggle('dark');
}
});
但是使用 CSS 的力量可能更容易。像這樣：
.container1 {
background-color: lightblue;
}
.dark .container1 {
background-color: yellow;
}
現(xiàn)在，您只需dark在所有元素的父元素（例如 ）上添加或刪除類，body即可打開或關(guān)閉深色模式。
const button = document.querySelector('#darkmode');
button.addEventListener('click', () => {
document.body.classList.toggle('dark');
});
哦，小旁注：fit不是該屬性的有效值width。檢查MDN以獲取有效值。
舉報