后臺切換JS只作業一次

所以我的網站上有一個按鈕，如下所示：

<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;
    }

} 

但是，當我單擊按鈕時，它可以很好地關閉它，但是當我想重新打開它時它不起作用；有什么建議么？

uj5u.com熱心網友回復：

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>

uj5u.com熱心網友回復：

這是您想要的演示：

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>

uj5u.com熱心網友回復：

@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>

uj5u.com熱心網友回復：

如果沒有必要，我不會使用全域變數來控制狀態。

另外，還可以新建類屬性，切??換時只需要控制類即可。

以下是這兩種方法的示例，供您參考。

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">

標籤：javascript html css

上一篇：獲取但只獲取狀態？

下一篇：如何使用父元素阻止子元素上的點擊事件