小编Piz*_*y88的帖子

如何让我的暗模式开关在每次点击时工作?

我正在构建一个带有暗模式开关的应用程序。它适用于第一次点击,但之后,它适用于每第二次点击。

(此代码段显示了一个复选框。在项目中,它看起来像一个真正的开关)

知道如何通过单击让它工作吗?

const body = document.getElementById('body');
let currentBodyClass = body.className;
const darkModeSwitch = document.getElementById('darkModeSwitch');

//Dark Mode
function darkMode() {
    darkModeSwitch.addEventListener('click', () => {
        if (currentBodyClass === "lightMode") {
            body.className = currentBodyClass = "darkMode";
        } else if (currentBodyClass === "darkMode") {
            body.className = currentBodyClass = "lightMode";
        }
    });
}
Run Code Online (Sandbox Code Playgroud)
#darkModeSwitch {
        position: absolute;
        left: 15px;
        top: 15px;
    }

.darkMode { background-color: black; transition: ease .3s; }
.lightMode { background-color: #FFF; transition: ease .3s; }

#darkModeSwitch input[type="checkbox"] {
  width: …
Run Code Online (Sandbox Code Playgroud)

html javascript css

5
推荐指数
2
解决办法
1556
查看次数

标签 统计

css ×1

html ×1

javascript ×1