当我在 JavaScript 中切换为 toggled/checked 时，如何添加 CSS 背景？

Question

document.addEventListener('DOMContentLoaded',函数(){ var 复选框 = document.querySelector('input[type="checkbox"]'); var 彩虹背景 = ` 。彩虹 { 高度：100%；宽度：100%； left:0; 右：0；顶部：0；底部：0；位置：绝对；背景：线性渐变（#ff0000，#ff4000，#ff8000，#ffbf00，#ffff00，#bfff00，#80ff00，#40ff00，#00ff00，#00ff40，#00ff80，#00ffbf，#00ffff，#00bfff，#0080ff , #0040ff, #0000ff, #4000ff, #8000ff, #bf00ff, #ff00ff, #ff00bf, #ff0080, #ff0040, #ff0000); 背景大小：10000% 10000%； -webkit-动画：彩虹3s轻松无限；动画：彩虹 3s 轻松无限；}

    @keyframes rainbow { 
        0%{background-position:0% 82%}
        25%{background-position: 50% 9.5%}
        50%{background-position:100% 19%}
        75%{background-position: 75% 41%}
        100%{background-position:0% 82%}
    }
    `
var styleSheet = document.createElement("RainbowBackground")
styleSheet.innerText = RainbowBackground
document.head.appendChild(styleSheet)

checkbox.addEventListener('change',函数(){ 如果（checkbox.checked）{

    document.getElementById('body2').add = 'styleSheets'
    document.getElementById('text').innerHTML = 'ON';
} 
else {
  
    document.getElementById('body2').style.background = 'none'
    document.getElementById('text').innerHTML = 'OFF';
}

}); });

Answer 1

使用 element.classList.toggle 从 JavaScript 切换 class。

const checkBox = document.getElementById("checkbox")
const card = document.getElementById("card")

checkbox.addEventListener("change", () => {
    card.classList.toggle("bg_color")
})

.card{
  height: 100px;
  width: 100px;
  background: red;
}

.bg_color{
  background: linear-gradient(#ff0000, #ff4000, #ff8000, #ffbf00, #ffff00, #bfff00, #80ff00, #40ff00, #00ff00, #00ff40, #00ff80, #00ffbf, #00ffff, #00bfff, #0080ff, #0040ff, #0000ff, #4000ff, #8000ff, #bf00ff, #ff00ff, #ff00bf, #ff0080, #ff0040, #ff0000);
}

<div id="card" class="card">
  
</div>
<input type="checkbox" id="checkbox">

当我在 JavaScript 中切换为 toggled/checked 时，如何添加 CSS 背景？

How would I add a CSS background when my switch is toggled/checked in JavaScript?

javascript

css

if-statement

add

toggle