时间戳

首页 > 解决方案 > 切换切换按钮以在两个不同的样式表之间切换

javascript - 切换切换按钮以在两个不同的样式表之间切换

问题描述

我很快就要在大学考试了，我的网页设计教授让我们创建一个网站。
在这个网站中，我们需要应用样式更改，在 2 个不同的 CSS 样式表之间切换。
我考虑过默认制作黑白版本，然后使用切换按钮切换到彩色版本。
我创建了按钮，但我不明白如何从一个样式表链接和转换到另一个样式表。我想我需要使用 Javascript，但我不知道该怎么做。这是我的按钮的 html 部分： 

.switch {
  position: relative;
  height: 34px;
  width: 60px;
  display: inline-block;
  }
.switch input {
  display: none;
  }
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: white;
  border-radius: 26px;
  transition: 0,4s;
  }
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  border-radius: 50%;
  background-color: black;
  left: 4px;
  top: 4px;
  transition: 0.4s;
  }
input:checked + .slider {
  background-color: #fffe54;
  }
input:checked + .slider:before {
  transform: translateX(26px);
  }
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

如果有人可以帮助我，将不胜感激！

标签： javascriptcss

解决方案

我找到了这个线程：如何为正在查看的网站动态更改 css 样式表？

线程中有不止一种解决方案，让我知道其中一种是否适合您。

推荐阅读