如何使用JavaScript永久更改网站中的CSS文件？

Question

我正在尝试向我的网站添加浅色/深色样式功能。 我编写了一个代码，当单击一个按钮时，可以在两个样式表之间进行切换，但是每当我转到其他路线时，样式就会恢复为常规样式。

Javascript：

 function swapStyleSheet(sheet){
        document.getElementById('pageStyle').setAttribute('href', sheet);
    }

HTML：

 <link rel="stylesheet"  href="/stylesheets/light.css" id="pageStyle">
    <body>
    <li><a id="navLinks" onclick="swapStyleSheet('/stylesheets/light.css')">Light Style!</a></li>
            <li><a id="navLinks" onclick="swapStyleSheet('/stylesheets/main.css')">Dark Style!</a></li>
    </body>

Answer 1

您可以使用Web Storage API进行此操作。

这类似于使用cookie，但是数据存储在浏览器中而不是服务器中。 所有现代浏览器均支持。

JS：

function swapStyleSheet(sheet){
    document.getElementById('pageStyle').setAttribute('href', sheet);

    window.localStorage.setItem("pageStyle", sheet);
}

window.onload = function() {
    swapStyleSheet(window.localStorage.getItem("pageStyle"));
}

HTML：

<li><a id="navLinks" onclick="swapStyleSheet('/stylesheets/light.css')">Light Style!</a></li>
<li><a id="navLinks" onclick="swapStyleSheet('/stylesheets/main.css')">Dark Style!</a></li>

如何使用JavaScript永久更改网站中的CSS文件？

问题描述

1 个解决方案

解决方案1
4 2019-09-18 14:23:49

您可以使用Web Storage API进行此操作。

如何使用JavaScript永久更改网站中的CSS文件？

问题描述

1 个解决方案

解决方案1 4 2019-09-18 14:23:49

您可以使用Web Storage API进行此操作 。

解决方案1
4 2019-09-18 14:23:49

您可以使用Web Storage API进行此操作。