使用 javascript 在运行时更改整个网站的样式表

Question

所以我正在使用 xhtml 和 css 创建一个网站。我没有 Javascript 经验，但使用 this turorial 以便在运行时使用按钮更改样式表。

所以我脑子里的代码是

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

我的按钮代码是

<button onclick="swapStyleSheet('projectstylesheetalternate.css')">
                Alternate Stylesheet
</button>

我如何让样式表更改保持不变，以便在我切换页面时它不会恢复到原始样式表。

Answer 1

您有多个选项可以使样式表更改永久化：

您以不需要实际页面重新加载的方式开发您的网站，例如通过异步加载新内容。然后保存用户 "stylesheet decision"，直到他点击重新加载按钮
单击按钮时，您还会向服务器发送请求并将样式表路径保存在用户会话数据中。只要会话持续，用户的决定就会被保存，通常是直到用户退出浏览器。
您将样式表路径存储在 cookie、localStorage 中或将其缓存在客户端的其他位置。更改是永久性的，直到用户清除其 cookie、缓存等。
您让用户在您的页面上注册，并且 - 与方法 1 类似 - 在单击按钮时向服务器发出请求。但是这次您没有将值存储在会话中，而是存储在用户配置文件 linked/part 的数据库 table 中。更改是永久性的，只要您不提供将样式表更改回来的方法，用户就无法这样做（除了注册新帐户）

我认为解决方案 3 最适合您的需要。所以你可能想使用像 js-cookie 这样的库来实现这一点。

使用 javascript 在运行时更改整个网站的样式表

Changing style sheets for entire website at runtime using javascript

javascript

css

xhtml