document.addEventListener('DOMContentLoaded', function () { var checkbox = document.querySelector('input[type="checkbox"]'); var RainbowBackground = `.Rainbow { height: 100%; width: 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-animation：彩虹 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', function () { 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';
}
}); });
uj5u.com熱心網友回復：
用于element.classList.toggle從 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">轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/449337.html
上一篇：php檔案大小驗證