javascript - 单击按钮时如何在图标之间切换？

Question

我想在启用或禁用深色模式时在月亮和太阳之间切换。
现在我有了它，我可以改变一次，但之后它仍然像月亮一样。

我该如何解决这个问题？

function darkmode() {
  document.body.classList.toggle('dark-mode');
   document.getElementById('toggleknop').innerHTML = '<i class="fas fa-moon fa-2x" id="maan" style="color:#737eac;"></i>';
}

<button onclick="darkmode()" id="Knop"> 
  <span id="toggleknop"><i class="fas fa-sun fa-2x" id="zon" style="color:#d8c658;"></i></span>
</button> 

Answer 1

您可以轻松更改/切换 Drak <=> Light 仅使用 CSS。

仅使用“document.body.classList.toggle('dark-mode');”代码进行切换。显示图标取决于父类。请参阅此处的片段:

function darkmode() {
  document.body.classList.toggle('dark-mode');
}

.dark-mode button {
  background: black;
  color: white;
}

.dark-mode .sun-icon,
.moon-icon {
  display: none;
}

.dark-mode .moon-icon {
  display: inline;
}

<button onclick="darkmode()" id="Knop"> 
 click
 <span class="sun-icon">
    sun <i class="fas fa-sun fa-2x" id="zon" style="color:#d8c658;"></i>
  </span>
   <span class="moon-icon">
    moon <i class="fas fa-moon fa-2x" id="maan" style="color:#737eac;"></i>
  </span>
</button>

也许它可以帮助解决你的问题。

谢谢