按钮切换网站样式表异常：点击后样式表失效无法切回求助

问题现象 #

点击切换主题按钮后，样式表失效，无法切回原样式，必须刷新页面才能恢复。

问题代码 #

JavaScript代码 #

const stylesUrls = ["C:\Users\purrl\OneDrive\Desktop\Personal Coding\html\claires.css", "C:\Users\purrl\OneDrive\Desktop\Personal Coding\html\queen-of-hearts.css"];

window.onload = function(){
     let switcherBtn = document.getElementById("themes");

      switcherBtn.onclick = function() {
                let style = document.getElementById('ss');
                let stylesUrl = stylesUrls.shift();
                style.href = stylesUrl;
                stylesUrls.push(stylesUrl);
      }
};

HTML代码 #

<link rel="stylesheet" href='C:\Users\purrl\OneDrive\Desktop\Personal Coding\html\claires.css' id="ss" type="text/css">
<button id="themes" type="button">Switch Theme</button>

问题原因 #

1. 路径转义错误：JavaScript字符串中的反斜杠\是转义字符，比如\U会被解析为特殊字符，导致实际路径与预期不符，样式表无法正确加载。
2. 本地路径协议缺失：直接使用Windows本地路径（如C:\xxx）在浏览器中无法被正确识别，需要使用file://协议前缀，或者改用相对路径更稳妥。

修复方案 #

方案1：改用相对路径（推荐） #

如果样式表和HTML文件在同一目录下，直接使用文件名即可；不在同一目录则用相对路径，避免绝对路径的兼容性问题。

方案2：修复绝对路径的转义与协议 #

将路径中的反斜杠改为双反斜杠\\，或者正斜杠/，同时添加file://协议前缀（Windows路径需改为file:///C:/xxx格式）。

修正后的代码示例 #

JavaScript代码

// 假设样式表和HTML在同一文件夹，使用相对路径
const stylesUrls = ["./claires.css", "./queen-of-hearts.css"];

window.onload = function(){
    const switcherBtn = document.getElementById("themes");
    const styleLink = document.getElementById('ss');
    let currentIndex = 0;

    switcherBtn.onclick = function() {
        // 循环切换索引，实现样式表交替切换
        currentIndex = (currentIndex + 1) % stylesUrls.length;
        styleLink.href = stylesUrls[currentIndex];
    }
};

HTML代码

<!-- 对应改用相对路径 -->
<link rel="stylesheet" href="./claires.css" id="ss" type="text/css">
<button id="themes" type="button">Switch Theme</button>

额外优化说明 #

用索引循环的方式替代shift()+push()，逻辑更直观，避免数组元素频繁移动的冗余操作，同时确保每次切换的路径都有效。

内容的提问来源于stack exchange，提问作者grace