document.addEventListener('DOMContentLoaded', function () { var checkbox = document.querySelector('input[type="checkbox"]'); var RainbowBackground = ` .Rainbow { altura: 100%; ancho: 100%; izquierda: 0; derecha: 0; arriba: 0; abajo: 0; posición: absoluta; fondo: degradado lineal (#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); tamaño de fondo: 10000% 10000%; -animación de webkit: arco iris 3s fácil infinito; animación: arco iris 3s fácil infinito;}
@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('cambiar', función () { if (checkbox.checked) {
document.getElementById('body2').add = 'styleSheets' document.getElementById('text').innerHTML = 'ON'; } else { document.getElementById('body2').style.background = 'none' document.getElementById('text').innerHTML = 'OFF'; }}); });
Use element.classList.toggle para cambiar una clase de JavaScript.
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">