Question

我在HTML页面中添加了一个主题：

<link rel="alternate stylesheet" href="css/dark.css" title="dark">

这会创建一个选项，可以按预期在浏览器中切换视图＆gt;样式中的主题。我想在页面中创建一个用于更改主题的开关。 <button>Switch Theme</button>会创建一个按钮，但如何让它切换主题？

Answer 1

您应该点击按钮时触发href标记的<link>属性的更改，如下所示：

<强> HTML

<link rel="stylesheet" href="dark.css" id="theme">
<button id="switch">Switch Theme</button>

<强>的JavaScript

document.getElementById('switch').onclick = function() {
  if (document.getElementById('theme').href == "dark.css") {
    document.getElementById('theme').href = "light.css";
  } else {
    document.getElementById('theme').href = "dark.css";
  }
};

现在，dark.css和light.css将分别为两个主题的元素包含不同的样式。例如：

<强> dark.css

body{
    background: #000;
}

<强> light.css

body{
    background: #fff;
}

Answer 2

这很简单，你需要将点击绑定到函数并调用它：

Replacing css file on the fly (and apply the new style to the page)

创建用于更改浏览器页面样式html的主题内容的开关

2 个答案: