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

Question

>我通过以下方式在HTML页面中添加了一个主题：

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

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

Answer 1

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

.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将分别包含两个主题的元素的不同样式。例如：

黑暗.css

body{
    background: #000;
}

光.css

body{
    background: #fff;
}

Answer 2

这

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

动态替换 css 文件(并将新样式应用于页面(