0

我一直在尝试使用 JavaScript 打开和关闭我的切换触发暗模式，但显然我做错了什么。我试图通过将灯光类应用到我的身体并使用 addClassListener 来触发它。下面是我的代码的简化版本，但我也计划在特定类上执行此操作，以便在每种不同模式下也更改字体和 div 颜色。有什么建议么？

HTML

<label class="switch">
  <input type="checkbox" checked>
  <span id="slide" class="slider round"></span>
</label>

CSS

body{
          
          position: absolute;
          top: 320px;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: hsl(230, 17%, 14%);
          z-index: -1;
          
          
      }
    
    body.light {
          
          background-color: white;
          
          
      }

Javascript

const checkbox = document.getElementById('slide');
        
        checkbox.addEventListener('change', ()
                                 ==>{document.body.classList.toggle('light');
            
        });
4

1 回答 1

1

您正在尝试通过 获取元素id，但您尚未id在代码段中定义任何 s。

<label class="switch">
  <input type="checkbox" checked>
  <span id="slider" class="slider round"></span>
</label>

此外，您正在侦听元素change上的事件。span该span元素永远不会触发更改事件。如果您将其更改为在input元素中侦听，它应该会触发。文档

于 2021-01-15T14:42:41.190 回答