单击即可将css href属性更改为多个html页面

change css href attributes to multiple html pages onclick

本文关键字：页面 html 属性 css href 单击      更新时间：2023-09-26

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

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

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

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

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

Javascript：函数集样式表（url）{var stylesheet=document.getElementById（"stylesheet"）；stylesheet.setAttribute（'ref'，url）；}

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

理想情况下您会使用cookie，但如果您真的真的想在没有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——它们几乎完全是为了这个目的而制作和使用的，你不必处理粗略的边缘情况，比如如果URL中已经有theme，或者它将转到另一个在URL中也使用theme的域，如果你用Javascript更改页面，它仍然可以工作，等等——但我认为这种方法也应该有效。

相关文章：