所以我的网站上有一个按钮，如下所示：
<button id = "bgb">Toggle Background</button>
我想让这个按钮在一个盒子里打开和关闭背景。因此，我在 JavaScript 中编写了一个脚本来执行此操作。
var bg = true;
document.querySelector("#bgb").onclick = function(){
const mb = document.querySelector(".Main-Box");
if (bg == true)
{
mb.style.background = "white";
bgb = false;
}
if (bg == false)
{
mb.style.background = "linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706)";
bgb = true;
}
}但是，当我单击按钮时，它会很好地关闭它，但是当我想重新打开它时它不起作用；有什么建议么？
回答1
bg 始终设置为真。为什么你改变“bgb”？
尝试
<script>
var bg = true;
document.querySelector("#bgb").onclick = function () {
const mb = document.querySelector(".Main-Box");
if (bg) {
mb.style.background = "red";
bg = false;
} else {
mb.style.background = "linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706)";
bg = true;
}
}
</script>回答2
这是您想要的演示：
let bg = true;
document.querySelector("#bgb").onclick = function(){
const mb = document.querySelector(".Main-Box");
if (bg == true)
{
mb.style.background = "white";
bg = false;
}
else if (bg == false)
{
mb.style.background = "linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706)";
bg = true;
}
}.Main-Box {
width: 100vw;
height: 100vh;
background: linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706);
}<div class='Main-Box'>
<button id="bgb">Click Me!</button>
</div>回答3
@cSharp 已经为您提供了解决问题的方法。但是，为了使您的整个代码更短更容易，您可以简单地使用： classList.toggle() 并通过打开和关闭 CSS-Class 来应用更改：
document.querySelector('#bgb').addEventListener("click", function() {
document.querySelector('.Main-Box').classList.toggle('class-name');
});.Main-Box {
width: 100vw;
height: 100vh;
background: linear-gradient(45deg, #F17C58, #E94584, #24AADB, #27DBB1, #FFDC18, #FF3706);
}
.class-name {
background: white;
}
/* for visualisation only */
body {
margin: 0;
}<div class='Main-Box'>
<button id="bgb">Click Me!</button>
</div>回答4
如果没有必要，我不会使用全局变量来控制状态。
另外，还可以新建类属性，切换时只需要控制类即可。
以下是这两种方法的示例，供您参考。
document.querySelector('input[type=button]').onclick = function() {
switchLinearGradientBackground('.main-box', 'linear-gradient');
}
function switchLinearGradientBackground(selector, switchClassName) {
const elems = document.querySelectorAll(selector);
for (let index = 0; index < elems.length; index++) {
elems[index].classList.toggle(switchClassName);
}
}body {
display: flex;
}
.main-box {
flex-direction: column;
display: flex;
width: 200px;
height: 200px;
}
.linear-gradient {
background: linear-gradient(45deg, #F17C58, #E94584, #24AADB, #27DBB1, #FFDC18, #FF3706) !important;
}<div class='main-box' />
<input type='button' value="switch background">document.querySelector('input[type=button]').onclick = function() {
switchLinearGradientBackground('.main-box');
}
function switchLinearGradientBackground(selector) {
const elems = document.querySelectorAll(selector);
const grad = 'linear-gradient(45deg, #F17C58, #E94584, #24AADB, #27DBB1, #FFDC18, #FF3706)';
for (let index = 0; index < elems.length; index++) {
const style = elems[index].style;
style.background = style.background.length > 0 ? '' : grad;
}
}body {
display: flex;
}
.main-box {
flex-direction: column;
display: flex;
width: 200px;
height: 200px;
}<div class='main-box' />
<input type='button' value="switch background">