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

Question

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

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

有没有办法动态更改每个html页面的href属性，以便在每个页面上更改css颜色文件。 或者我需要cookie才能记住这个？ 我还没有了解过cookie，但想知道这是不是一个功能。

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

HTML：橙色主题紫色主题红色主题

Javascript：function setStyleSheet（url）{var stylesheet = document.getElementById（“stylesheet”）; stylesheet.setAttribute（'href'，url）; }

我从外部保存了所需的css文件。 我们非常欢迎任何帮助。 谢谢。

Answer 1

理想情况下 ，你会使用cookie，但如果你真的真的想要做没有cookies，您可以尝试运行是这样的：

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);
}

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

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

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

请注意，当我说“理想”时，我的意思是你应该使用cookies - 它们是为了这个目的而制作并且几乎完全用于此目的，你不必处理粗略的边缘情况，比如URL中已有theme或者如果它转到另一个也使用URL中的theme域，如果你用Javascript更改页面它仍然可以工作，等等 - 但我相信这个方法也应该有用。