将css href属性更改为多个html页面onclick

Question

我想让用户为他们在我的网站上的体验选择一个颜色主题。我创建了不同的主题外部 css 文件，并创建了一个函数，可以在我创建的所有颜色选项之间成功切换。

唯一的问题是，当我单击站点上另一个页面的链接时，主题会返回到我创建页面时使用的默认颜色。

有没有办法动态更改每个html页面的href属性，以便在每个页面上更改css颜色文件。或者我需要cookies来记住这一点吗？我还没有了解 cookie，但想知道这是否可以成为一个函数。

下面是我的代码，它在该页面上的每种颜色之间变化，但仅在该页面上。

HTML: 橙色主题 紫色主题 红色主题

Javascript： 功能设置样式表（网址）{ var stylesheet = document.getElementById("stylesheet"); stylesheet.setAttribute('href', url); }

我已将所需的 css 文件保存在外部。任何帮助将不胜感激。谢谢。

Answer 1

理想情况下你会使用 cookie，但如果你真的真的想在没有 cookie 的情况下这样做，你可以尝试运行类似的东西：

var links = document.querySelectorAll("a");

for (i = 0; i < links.length; i++) {
    var existingHref = links[i].href;
    links[i].href += (links[i].href.indexOf("?") + 1 ? "&" : "?") + "theme=" + encodeURIComponent(theme);
}

（未经测试的代码，还有一些您想要检查的其他极端情况，但总体思路就在那里）

这将更新页面上的每个链接，将 theme=[theme] 属性添加到其 URL，然后您可以通过解析 window.location.search 在以后的页面中加载该属性：

function getTheme() {
    if (window.location.search.split("theme=").length < 2) return null;
    return window.location.search.split("theme=")[1].split("&")[0];
}

请注意，当我说“理想情况下”时，我的意思是您应该使用 cookie - 它们几乎完全用于此目的，您不必处理粗略的边缘情况，例如已经有 @987654326 @ 在 URL 中，或者如果它要去另一个在 URL 中也使用 theme 的域，如果您使用 Javascript 更改页面，它仍然可以工作，等等 - 但我相信这种方法也应该有效。