切换同一个类的多个元素

问题描述

我已经在网上找到了很多信息，但是似乎无法获得任何信息。

我正在尝试创建一个按钮，该按钮在单击时切换明/暗主题，仅更改正文背景颜色和页面上三个模式按钮的样式。我的代码适用于按钮样式，但不适用于主体背景。我是新手，所以我认为我可能只是在语法上缺少一些东西。啊！

它必须使用本机javascript而不是jQuery。任何提示将不胜感激。提前非常感谢！

CSS：

.light body {
    background: #D8DDDE;
}

.light .myBtn {

    color:rgb(58,57,57);
    background-color: #D8DDDE;
    border-top: solid 4px rgb(58,57);
    border-left: none;
    border-right: none;
    border-bottom: none; 
    transition: 0.6s;

}

JavaScript

var themeSwitch = document.querySelector("footer button");

document.querySelector("footer button").addEventListener("click",toggleText);
   function toggleText() {
      if (themeSwitch.textContent === "Turn the lights off") {
         themeSwitch.textContent = "Turn the lights on";
      } else {
         themeSwitch.textContent = "Turn the lights off";
      }
   }

themeSwitch.addEventListener('click',function(){
    document.querySelector("body").classList.toggle("light") //this is working for the button but not the body background
})

解决方法

此代码为erorr

json(variables('CurrentTags')[variables('StateTagName')])

胸膜变为

  .light body {
        background: #D8DDDE;
    }

body.light{
    background: #D8DDDE;
} 

var themeSwitch = document.querySelector(".footer button");

themeSwitch.addEventListener("click",toggleText);
   function toggleText() {
      if (themeSwitch.textContent === "Turn the lights off") {
         themeSwitch.textContent = "Turn the lights on";
      } else {
         themeSwitch.textContent = "Turn the lights off";
      }
   }

themeSwitch.addEventListener('click',function(){
    document.querySelector("body").classList.toggle("light") //this is working for the button but not the body background
})

body.light {
    background: #D8DDDE;
}

.light .myBtn {

    color:rgb(58,57,57);
    background-color: #D8DDDE;
    border-top: solid 4px rgb(58,57);
    border-left: none;
    border-right: none;
    border-bottom: none; 
    transition: 0.6s;

}

,

尝试从css类body中删除.light。