classList.toggle
改变颜色。大部分情况下一切都很好,但导航只在第一时间起作用
li
a
. 这是我的代码:
HTML格式
<div class="fixed-darkmode">
<div class="darkmode-definition">
<button class="nightModeButton">darkmode</button>
</div>
<nav style="padding-left: 100px;">
<ul>
<li><a href="#">Bio</a></li>
<li><a href="#">Galéria</a></li>
</ul>
</nav>
CSS
li a {
display: inline-block;
font-family: 'Merriweather', serif;
font-weight: 500;
font-size: 22px;
text-decoration: none;
color: #171717;
padding: 0 30px;
}
li a:hover {
color: #171717;
text-decoration: none;
}
body.night-mode {
background: #181b23;
}
li a.night-mode {
color: #fff !important;
}
Javascript(jQuery)
var nightModeToggleButton = document.querySelector(".nightModeButton");
var body = document.querySelector("body");
var navigacka = document.querySelector("a");
nightModeToggleButton.onclick = function() {
nightModeToggleButton.classList.toggle("night-mode");
body.classList.toggle("night-mode");
navigacka.classList.toggle("night-mode");
};
