我正在重新设计 YouTube 网站,并且正在开发明/暗模式系统。我设置了一些代码,但无法让它工作。经过一些错误修复后,我让它可以工作(在 Stack Overflow 的帮助下),但该按钮在单击几次后停止工作。有人可以帮忙吗?
代码:
var r = document.querySelector(':root');
var isdark = 0;
function darkLight() {
if (isdark == 0) {
r.style.setProperty('--backgroundcolor', '#1a1a1a');
r.style.setProperty('--bodycolor', '#3b3b3b')
r.style.setProperty('--fontcolor', 'white')
isdark = 1;
} else if (isdark == 1) {
r.style.setProperty('--backgroundcolor', '#d4d4d4')
r.style.setProperty('--bodycolor', '#f2f2f2')
r.style.setProperty('--fontcolor', 'black')
isdark = 0;
}
}
@import url('https://fonts.googleapis.com/css2?family=Lexend&family=Nunito&display=swap');
:root {
--maincolor: #ed1818;
--backgroundcolor: #d4d4d4;
--bodycolor: #f2f2f2;
--fontcolor: black;
}
body {
background-color: var(--backgroundcolor);
font-family: Nunito, sans-serif;
color: var(--fontcolor);
padding: 20px;
}
.body {
background-color: var(--bodycolor);
border-radius: 5px;
padding: 10px 30px;
}
.header {
padding: 20px 0px;
}
button {
border: 0px solid black;
border-radius: 5px;
background-color: var(--backgroundcolor);
font-famliy: Nunito, sans-serif;
color: var(--fontcolor);
padding: 10px;
transition-duration: 0.2s;
}
button:hover {
border: 0px solid black;
border-radius: 5px;
background-color: var(--bodycolor);
font-famliy: Nunito, sans-serif;
color: var(--fontcolor);
cursor: pointer;
}
<div class="header">
<img src="https://www.youtube.com/s/desktop/c1d331ff/img/favicon_48x48.png">
<button class="lightdark" onclick="darkLight">
<svg viewBox="0 0 512 512" width="20" title="adjust" onclick="darkLight()">
<path d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z" />
</svg>
<p>Adjust colors</p>
</button>
</div>
<div class="body">
<p>Lorem ipsum</p>
</div>
此代码的问题在于
if
和 else if
块中的条件语句。
不使用比较运算符(== 或 ===)来检查
isdark
的值,而是使用赋值运算符 (=)。
这意味着每次执行
isdark
或 if
块时,else if
都会被设置为 0,并且块内的代码将始终像 isdark
为 0 一样运行。
要解决此问题,将 = 运算符更改为 == 或 === 以正确比较 isdark 的值:
var r = document.querySelector(':root');
var isdark = 0;
function darkLight() {
if (isdark == 0) {
r.style.setProperty('--backgroundcolor', '#1a1a1a');
r.style.setProperty('--bodycolor', '#3b3b3b')
r.style.setProperty('--fontcolor', 'white')
isdark = 1;
} else if (isdark == 1) {
r.style.setProperty('--backgroundcolor', '#d4d4d4')
r.style.setProperty('--bodycolor', '#f2f2f2')
r.style.setProperty('--fontcolor', 'black')
isdark = 0;
}
}