时间戳

首页 > 解决方案 > 单击按钮时如何在图标之间切换？

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

问题描述

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

我该如何解决这个问题？

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>

标签： javascripthtml

解决方案

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

仅将“ 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>

也许它有助于解决您的问题。

谢谢

推荐阅读