TA貢獻1816條經驗 獲得超4個贊
為什么不調整你的 css，這樣你只改變一個？保持衛生。
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貢獻1826條經驗 獲得超6個贊
選擇按鈕并監聽事件click。每當您單擊一個按鈕時，您都會想要調用一個函數，該函數循環遍歷您指定的元素并用于向這些元素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;
}
現在，您只需dark在所有元素的父元素（例如 ）上添加或刪除類，body即可打開或關閉深色模式。
const button = document.querySelector('#darkmode');
button.addEventListener('click', () => {
document.body.classList.toggle('dark');
});
哦，小旁注：fit不是該屬性的有效值width。檢查MDN以獲取有效值。
舉報