2

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

4

2 回答 2

0

您可以将布尔变量用于切换机制。

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>

于 2021-01-22T16:34:08.217 回答
0

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

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

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

在片段实现下面：

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>

于 2021-01-22T17:10:19.747 回答