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

Question

，我正在使用XHTML和CSS创建网站。我没有JavaScript的经验，但使用此术语来使用按钮在运行时更改样式表。

所以我脑海中的代码

<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

您有多个选择使样式表变更永久性：

1. 您以不需要真实页面重新加载的方式开发网站，例如通过异步加载新内容。然后保存用户"样式表决定"，直到他击中重新加载按钮

2. 按钮单击您还将请求发送到服务器并将样式表路径保存在用户会话数据中。然后，只要会话持续，用户的决定就会保存，这通常是在用户退出其浏览器之前。

3. 您将样式表路径存储在cookie，localstorage或将其缓存在客户端中的其他地方。然后，更改将是永久的，直到用户清除其cookie，高速缓存等。

4. 您使用户在页面上注册，并且 - 类似于方法1-单击按钮向服务器请求。但是这一次，您不在会话中存储该值，而是在链接/一部分用户配置文件的数据库表中。然后，只要您不提供更改样式表的方法，更改就无法更改，用户无法这样做(除了注册新帐户外(

我认为第三解决方案最适合您的需求。因此，您可能需要使用像JS-Cookie这样的库来实现这一目标。