单击按钮更改背景

问题描述 投票:0回答:1

我需要通过单击按钮更改图像的同时更改背景颜色。使背景变暗完全可行,但如何通过单击按钮来更改背景?我正在寻找它,但没有成功,请帮助我。

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');
    }
});
javascript python html
1个回答
0
投票

我认为你需要

body.classList.add('someClass')
body.classList.remove('someClass')

回答SO教程,所以请对我有礼貌:)

© www.soinside.com 2019 - 2024. All rights reserved.