Question

我试图改变html网页的颜色，并且它没有任何问题。但是我有几个网页，我希望只需按一下按钮即可更改所有页面的颜色。将有一个设置页面，其中有颜色选项，用户可以通过选择任何颜色来更改所有网页的颜色。

更改单页颜色的代码：

＆＃13;

$(document).ready(function() {
  $(".btn").click(function() {
    if ($(".container").hasClass("night")) {
      $(".container").removeClass("night");
      $(".btn").removeClass("btn-night").text("Night Mode Off");
      $(".text").removeClass("text-night");
      $(".p-sm").text("Turn on the night mode to change the background to dark.");
    } else {
      $(".container").addClass("night");
      $(".btn").addClass("btn-night").text("Night Mode On");
      $(".text").addClass("text-night");
      $(".p-sm").text("Night mode is active. Turn off the night mode to change the background to light.");
    }
  });
});

＆＃13;

body,
.container {
  height: 100vh;
}

.container {
  width: 100%;
  display: flex;
  justify-content: center;
  animation-name: daytransition;
  animation-duration: 3s;
}

@keyframes daytransition {
  from {
    background-color: #040018;
  }
  to {
    background-color: #fff;
  }
}

.text {
  position: absolute;
  top: 30%;
  font-size: 20px;
  text-align: center;
}

.p-lg {
  font-size: 28px;
}

.p-sm {
  margin: 30px;
}

.night {
  animation-name: nighttransition;
  animation-duration: 3s;
  background-color: #040018 !important;
}

@keyframes nighttransition {
  from {
    background-color: #fff;
  }
  to {
    background-color: #040018;
  }
}

.text-night {
  color: #c5b2cc;
}

.btn {
  margin: 30px;
  background-color: #6f6f8e !important;
  color: #FBFFC9 !important;
}

.btn-night {
  background-color: #FBFFC9 !important;
  color: #6f6f8e !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>

<body>
  <div class="container">
    <div class="text">
      <p class="p-lg">Demo of Day and Night Themes</p>
      <button class="btn btn-lg">Night Mode Off</button>
      <p class="p-sm">Turn on the night mode to change the background to dark.</p>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

您希望在不同页面之间保持状态。您可以使用会话存储

来完成

sessionStorage.setItem('key', 'value');
sessionStorage.getItem('key');

如何通过javascript一次更改多个网页的颜色？

1 个答案: