Question

我一直在尝试创建一种逻辑来回切换按钮（图像）并无限切换样式（亮/暗模式），但是我没有这样做。你能给我一些提示如何做到这一点吗？

使用此代码，我仅能成功切换一次样式...

let toggleDark =
    document.getElementById('btn-toggle').addEventListener('click', function() {
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
    document.querySelector('.sun').style.visibility = 'hidden';
    document.querySelector('.moon').style.visibility = 'visible';

    toggleLight();
});

function toggleLight() {
    document.getElementById('btn-toggle').addEventListener('click', function() {
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
    document.querySelector('.sun').style.visibility = 'visible';
    document.querySelector('.moon').style.visibility = 'hidden';
})};

这是HTML部分...

<body class="dark light">

<div>
    <button id="btn-toggle">
        <img src="weather-sunny.png" alt="Light Mode" id="light_mode" class="sun">
        <img src="weather-night.png" alt="Dark Mode" id="dark_mode" class="moon">
    </button>
</div>

<main>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero quo, officiis repellat quam accusantium neque pariatur! Facilis nemo enim cumque atque, eaque perferendis corporis aliquid, temporibus, incidunt, sint sed sunt.</p>
</main>

Answer 1

如果将相同的eventListener添加到相同的元素，则两者都将在设置后执行。它不会在两者之间切换，您可以使用Boolean在一个函数中执行此操作。

注意：如果开始模式为白色，则将切换为true；如果为黑色，则将其切换为false。

function colormode(toggle) {
    document.querySelector('body').style.backgroundColor = (toggle) ?'black':'white';
    document.querySelector('body').style.color = (toggle) ? 'white':'black';
    document.querySelector('.sun').style.visibility = (toggle) ? 'hidden':'visible';
    document.querySelector('.moon').style.visibility = (toggle) ? 'visible':'hidden';
};

var toggled = false;
document.getElementById('btn-toggle').addEventListener('click', function() {
   colormode(toggled);
   toggled = !toggled;
});

暗模式切换

1 个答案: