更改div id按钮单击功能，以创建一个黑暗模式
更改div id按钮单击功能，以创建一个黑暗模式
提问于 2022-11-03 13:06:41
我正在尝试编写一个JavaScript，它使id在单击时更改其id。基本上，我想创建一个黑暗模式切换按钮。但不知道我做错了什么。
HTML
<button id="nottebottone" class="notte">Attiva modalità notturna</button>CSS
#Sito {
max-width: 1024px;
margin: auto;
text-align: center;
background-color: rgb(221, 241, 235);
border: black ridge;
border-width: 0.03cm;
}我想把它改成：
#Nightmode {
max-width: 1024px;
margin: auto;
text-align: center;
background-color: rgb(0, 0, 0);
border: rgb(255, 255, 255) ridge;
border-width: 0.03cm;
color: white;
}JavaScript：
let bottonedarkmode = document.getElementById("nottebottone");
function attivadarkmode() {
if (document.div.id == "Sito") {
document.div.id = "Nightmode";
}
else {
documento.div.id = "Sito";
}
}
bottonedarkmode.addEventListener('click', attivadarkmode);单击按钮nothing以启用id开关，但什么也不会发生。
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-11-03 13:12:21
你应该这样做：
let darkModeBtn = document.querySelector(".notte");
function attivadarkmode() {
darkModeBtn.classList.toggle('light');
darkModeBtn.classList.toggle('dark');
}
darkModeBtn.addEventListener('click', attivadarkmode);.notte {
max-width: 1024px;
margin: auto;
text-align: center;
}
.light {
background-color: rgb(221, 241, 235);
border: black ridge;
border-width: 0.03cm;
}
.dark {
background-color: rgb(0, 0, 0);
border: rgb(255, 255, 255) ridge;
border-width: 0.03cm;
color: white;
}<button id="nottebottone" class="notte light">Attiva modalità notturna</button>
乍一看，我认为问题是您在函数的documento部分中输入了document而不是document，尽管我没有仔细检查。
Stack Overflow用户
发布于 2022-11-03 13:14:01
我希望这将有助于您更改身份证：
document.getElementById('nottebottone').id = 'Nightmode';页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74303562
复制相关文章
相似问题
腾讯云开发者
