时间戳

首页 > 解决方案 > 如何使用 javascript 永久更改我网站中的 css 文件？

javascript - 如何使用 javascript 永久更改我网站中的 css 文件？

问题描述

我正在尝试向我的网站添加浅色/深色风格的功能。我编写了一个代码来在单击按钮时在两个样式表之间进行更改，但是每当我转到不同的路线时，样式都会恢复为常规样式。

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>

标签： javascriptcss

解决方案

您可以使用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>

推荐阅读