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

【问题标题】：Toggle switch button to switch between two different stylesheets切换切换按钮以在两个不同的样式表之间切换
【发布时间】：2020-06-10 12:15:43
【问题描述】：

我很快就要在大学考试，我的网页设计教授要求我们创建一个网站。
在这个网站中，我们需要应用样式更改，在 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>

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

【问题讨论】：

您需要切换的只是这个带有 .slider 类的元素的样式吗？
这里有一个例子 - Dark/Light mode 样式设置保存在本地存储中，你可以在家里使用它
使用该按钮，我需要切换整个网站的调色板。（有点像夜间/白天模式切换，但我想实现深色/彩色模式切换）
@chiab 这就是它的工作原理，为整个页面设置颜色。它们存储在本地存储中。
@GrzegorzT。谢谢你！但是如何使用不同的样式表实现相同的效果？那是我的问题

标签： javascript css

【解决方案1】：

我找到了这个帖子：How to change the css stylesheet dynamically for a website being viewed?

线程中有不止一种解决方案，如果其中一种适合您，请告诉我。

【讨论】：

我不认为操作必须随意更改样式表。但只是样式
@RamondeVries 他明确指出：“在 2 个不同的 CSS 样式表之间切换”

【解决方案2】：

您实际上可以做的最好的想法是为您的网站正文分配一个默认类，当您单击按钮时，您会切换类，使用不同的类。当您单击返回切换按钮时，它会重新应用默认类。

通过这种方式，您可以加载两个样式表，但只使用其中一个。

或者只加载一个不同样式的。

您可以在here on w3schools找到部分示例。

【讨论】：

【解决方案3】：

我准备了一个如何更改样式表的示例。

您还应该创建两个样式文件。我称它们为蓝色和红色；）style.red.css 和style.blue.css

当然，这应该保存在本地存储中，这样你就不必每次去另一个页面时都点击，但我已经为你留下了;）

const button = document.querySelector('button');
const type = 'red';

const headStyle = (type) => {
  const head = document.getElementsByTagName('head')[0];
  const style = document.createElement('link');
  style.rel = 'stylesheet';
  style.id = 'colorTheme';
  style.href = `./style.${type}.css`;
  head.appendChild(style);
  document.documentElement.setAttribute('data-theme', type)
  console.log(style);
}

button.addEventListener('click', () => {
  const colorTheme = document.querySelector('#colorTheme');
  colorTheme.parentNode.removeChild(colorTheme);
  const typeTheme = document.documentElement.getAttribute('data-theme');
  typeTheme === 'red' ? headStyle('blue') : headStyle('red')
})

window.addEventListener('load', headStyle(type));

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>switch</button>
  <script src="./script.js"></script>
</body>

</html>

【讨论】：