我需要通过单击按钮更改图像的同时更改背景颜色。使背景变暗完全可行,但如何通过单击按钮来更改背景?我正在寻找它,但没有成功,请帮助我。
html
<div class="image">
<input type="checkbox" id="hide-checkbox">
<label for="hide-checkbox" class="toggle">
<span class="toggle-button">
<span class="crater crater-1"></span>
<span class="crater crater-2"></span>
<span class="crater crater-3"></span>
<span class="crater crater-4"></span>
<span class="crater crater-5"></span>
<span class="crater crater-6"></span>
<span class="crater crater-7"></span>
</span>
<span class="star star-1"></span>
<span class="star star-2"></span>
<span class="star star-3"></span>
<span class="star star-4"></span>
<span class="star star-5"></span>
<span class="star star-6"></span>
<span class="star star-7"></span>
<span class="star star-8"></span>
</label>
CSS
body
{
margin: 0;
font-family: Arial, sans-serif;
background-image: url("https://sun9-66.userapi.com/impg/U_B0e4HYLxsYNJIxFpYW6jR12JhDy76x2zhkXw/O4OafXIrfLc.jpg?size=2560x1920&quality=95&sign=c9143650a2af6853e49e25e18475c8f4&type=album");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
JS
document.getElementById('hide-checkbox').addEventListener('click', function() {
const currentTheme = document.body.className;
if (currentTheme === 'light-theme') {
document.body.className = 'dark-theme';
localStorage.setItem('theme', 'css/Style.css');
} else {
document.body.className = 'light-theme';
localStorage.setItem('theme', 'css/Style.css');
}
});
我认为你需要
body.classList.add('someClass')
和 body.classList.remove('someClass')
回答SO教程,所以请对我有礼貌:)