如何解决切换同一个类的多个元素
我已经在网上找到了很多信息,但是似乎无法获得任何信息。
我正在尝试创建一个按钮,该按钮在单击时切换明/暗主题,仅更改正文背景颜色和页面上三个模式按钮的样式。我的代码适用于按钮样式,但不适用于主体背景。我是新手,所以我认为我可能只是在语法上缺少一些东西。啊!
它必须使用本机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
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。