更改按钮单击时的背景颜色可切换答案

【问题标题】：Change background colour on button click toggleable更改按钮单击时的背景颜色可切换
【发布时间】：2021-04-27 03:25:00
【问题描述】：

我正在尝试使用标签类“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>

并且我想在单击文档时将此 CSS 添加到文档中：

.Background{background: linear-gradient(45deg,lightblue,lightgreen,yellow,orange)}

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

Javascript 或 jquery 都可以。

【问题讨论】：

标签： javascript button background

【解决方案1】：

您只需在元素目标处使用classList.toggle。你可以创建你的函数，传递一个 target 元素以可重用：

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

并从您的label 元素中删除onclick="Togglebg()。在您的javascript文件中附加标签的点击eventListener。

在 sn-p 实现下：

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

const toggler = document.querySelector('#Toggle-bg')

toggler.addEventListener('click', () => Togglebg(document.querySelector('body')))

.Background{background: linear-gradient(45deg,lightblue,lightgreen,yellow,orange)}

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

【讨论】：

【解决方案2】：

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

let togg = false;

document.getElementById("inp").addEventListener("click", Togglebg);

function Togglebg() {
  if (togg) {
    console.log(togg);
    document.getElementById("Toggle-p").style.background = "white";
    togg = false;
  } else {
      console.log(togg);

    togg = true;
    document.getElementById("Toggle-p").style.background = "linear-gradient(45deg, lightblue, lightgreen, yellow, orange";
  }
}

.Background {
  background: linear-gradient(45deg, lightblue, lightgreen, yellow, orange)
}

<label class="Toggle" id="Toggle-bg"> <input id="inp" type="Checkbox">
<span class="Slider Rounded"></span>
</label>
<p id="Toggle-p">Toggle background</p>

【讨论】：

对不起，我没有解释清楚，是否可以将标签设为切换按钮？