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

Question

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

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

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

下面是我的代码，它在该页面上的每种颜色之间进行更改，但仅在该页面上。

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

Javascript: 函数 setStyleSheet(url) { 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);
}

(未经测试的代码，还有一些您需要检查的其他边缘情况，但总体思路就在那里)

这将更新页面上的每个链接，向其 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];
}

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