Javascript 更改按钮上的背景色单击可切换

我正在尝试制作一个标签类为“Toggle”的可切换按钮，点击后更改网站背景

我的html是：

<label class="Toggle" id="Toggle-bg" onclick="Togglebg()>
<input type="Checkbox">
<span class="Slider Rounded"></span>
</label>
<p id="Toggle-p">Toggle background</p>

我希望它是可切换的，但加载页面时不要乱动，谢谢

---

Javascript或jquery很好。

您可以为切换机制使用布尔变量

让togg=false；
document.getElementById（“inp”）.addEventListener（“单击”，切换BG）；
函数Togglebg（）{
如果（togg）{
控制台日志（togg）；
document.getElementById（“Toggle-p”）.style.background=“白色”；
togg=假；
}否则{
控制台日志（togg）；
togg=真；
document.getElementById（“Toggle-p”）.style.background=“线性渐变（45度，浅蓝色，浅绿色，黄色，橙色）；
}
}

.Background{
背景：线性梯度（45度，浅蓝色，浅绿色，黄色，橙色）
}

切换背景

您只需要使用

类列表。在元素目标处切换

。您可以创建传递

目标

元素的函数，以便可重用：

function Togglebg(target) {
  target.classList.toggle('Background')
}

并从

标签

元素中删除

onclick=“Togglebg（）

。在javascript文件中附加标签的click

eventListener

下面是代码段实现：

功能切换BG（目标）{
target.classList.toggle（'Background'）
}
const toggler=document.querySelector（“#Toggle bg”）
toggler.addEventListener（'click'，（）=>Togglebg（document.querySelector（'body'））

.Background{背景：线性渐变（45度，浅蓝色，浅绿色，黄色，橙色）}

Toggle background

对不起，我没有正确解释，是否可以将标签设置为Toggle按钮？@Laserfy2更新了我的答案

function Togglebg(target) {
  target.classList.toggle('Background')
}