在所有页面上更改CSS

Question

我希望能够在两个不同的样式表之间进行切换，并保持在主页上选择样式，但保持所有页面的使用一致。

<link id="pagestyle" rel="stylesheet" href="style1.css">
<script type="text/javascript">
  function swapStyleSheet(sheet){
    document.getElementById('pagestyle').setAttribute('href', sheet);
  }
</script>

<button onclick="swapStyleSheet('style.css')">Blue</button>
<button onclick="swapStyleSheet('style1.css')">White</button>

这只会更改首页的样式表，但如何将此更改应用于网站中的所有其他页面？

Answer 1

您可以使用本地存储来存储当前样式表。

var stylesheet = localStorage.getItem("stylesheet");

function swapStyleSheet(sheet){
    document.getElementById('pagestyle').setAttribute('href', sheet);
    localStorage.setItem('stylesheet', sheet);
}

if(stylesheet) {
    swapStyleSheet(stylesheet)
}