如何使用JavaScript切换外部样式表并通过localStorage保存设置避免刷新丢失

架构老林

2026-10-1

你现有代码存在一个小问题：HTML里link标签的id是change，但JS中用getElementById("style")获取元素，二者id不匹配会导致样式切换失效，先把两个id统一，我们这里统一将link标签的id改为style。

解决方案

你可以用浏览器的localStorage持久化存储用户选中的样式路径，页面每次加载时先读取存储的样式自动应用即可，修改后的完整代码如下：

修正后的HTML代码

<link id="style" rel="stylesheet" href="css/style.css">

修正后的JavaScript代码

// 页面加载完成后自动恢复上次选中的样式
document.addEventListener('DOMContentLoaded', function() {
  const savedStyle = localStorage.getItem('selectedStyle');
  if (savedStyle) {
    document.getElementById('style').href = savedStyle;
  }
})

$("#mobile-float").click(function() { 
    return (this.tog = !this.tog) ? addZonaDesk() : showZonaDesk();
});

function addZonaDesk(){ 
  const curStyle = "css/style.css?t=143";
  document.getElementById("style").href = curStyle;
  // 将当前选中的样式存入本地存储
  localStorage.setItem('selectedStyle', curStyle);
}

function showZonaDesk(){ 
  const curStyle = "css/style1.css?t=143";
  document.getElementById("style").href = curStyle;
  // 将当前选中的样式存入本地存储
  localStorage.setItem('selectedStyle', curStyle);
}