如何用HTML5+jQuery通过SwapStyleSheet onclick指向css文件夹样式表

问题根源 #

你把CSS文件挪去css/子文件夹后，代码里的样式表路径没跟着同步更新，切换时浏览器找不到对应文件，自然就失效了——把所有涉及样式表路径的地方改对就能解决。

具体修改方案 #

先贴你原本可运行的代码（保持你提供的原代码块内容不变）：

[原代码块内容，保持不变]

需要调整这3个关键位置：

1. 页面初始样式表的链接：把href里的文件名改成css/xxx.css格式
2. 切换按钮的onclick参数：要么直接传入完整的css/xxx.css路径，要么让函数自动补全路径前缀
3. SwapStyleSheet函数：如果按钮只传文件名，就在函数内部拼接css/前缀

改法一：直接传完整路径（最简单直接）

修改后的代码示例：

<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<!-- 初始样式表：路径添加css/前缀 -->
<link id="pagestyle" rel="stylesheet" type="text/css" href="css/default.css">

<!-- 切换按钮：onclick里直接传完整路径 -->
<button onclick="SwapStyleSheet('css/default.css')">默认样式</button>
<button onclick="SwapStyleSheet('css/dark.css')">深色样式</button>

<script>
// 原函数不需要修改，直接复用即可
function SwapStyleSheet(sheet) {
    document.getElementById('pagestyle').setAttribute('href', sheet);
}
</script>

改法二：函数自动补路径（代码更整洁）

如果不想每次都写css/，可以修改函数内部自动拼接路径：

function SwapStyleSheet(sheetName) {
    // 自动拼接css子文件夹路径
    const fullPath = `css/${sheetName}`;
    document.getElementById('pagestyle').setAttribute('href', fullPath);
}

对应的切换按钮只需传入文件名即可：

<button onclick="SwapStyleSheet('default.css')">默认样式</button>
<button onclick="SwapStyleSheet('dark.css')">深色样式</button>

验证小技巧 #

修改完成后刷新页面，按F12打开浏览器控制台查看网络请求，如果样式表文件的请求状态是200（没有404错误），说明路径配置正确，切换功能就能正常运行了。

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