通过JavaScript操作link标签或切换CSS类可实现动态换肤。1. 修改link的href属性直接替换样式文件；2. 动态创建link标签并插入head以加载新主题；3. 切换时先移除旧link避免冲突；4. 推荐使用CSS类名切换实现轻量主题变更，性能更优。路径正确与防重复加载需注意。
在网页开发中，有时需要根据用户操作或环境变化动态切换不同的CSS文件，比如实现主题切换（白天/黑夜模式）或多语言界面样式调整。CSS本身不能直接“切换”文件，但可以通过JavaScript操作HTML中的link标签来实现动态加载和替换CSS文件。
1. 通过修改link标签的href属性
页面中通常使用<link rel="stylesheet">引入CSS文件。我们可以通过JavaScript动态更改其href属性，从而切换样式表。
示例：
<link id="theme-style" rel="stylesheet" href="light.css"><button onclick="switchToDark()">切换到暗色主题</button>
JavaScript代码：
立即学习“前端免费学习笔记（深入）”；
function switchToDark() {
const link = document.getElementById('theme-style');
link.href = 'dark.css';
}
同理，也可以提供一个回到亮色主题的函数，只需将href改回light.css即可。
2. 动态创建并插入新的link标签
如果不希望覆盖原有样式表，而是想追加新的CSS文件（例如叠加主题），可以动态创建新的<link>标签并插入到页面中。
示例：
function loadTheme(themeUrl) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = themeUrl;
document.head.appendChild(link);
}
调用loadTheme('dark.css')即可加载新样式。注意这种方式会叠加样式，可能需要CSS优先级控制。
3. 移除旧的CSS文件
若要彻底切换而非叠加，建议先移除旧的link标签。
示例：
function changeTheme(newCssPath) {
// 查找当前的主题link标签
let oldLink = document.getElementById('theme-style');
if (oldLink) {
oldLink.remove();
}
// 创建新的link标签
const newLink = document.createElement('link');
newLink.id = 'theme-style';
newLink.rel = 'stylesheet';
newLink.href = newCssPath;
document.head.appendChild(newLink);
}
4. 使用媒体查询或CSS类代替切换文件（推荐轻量方案）
如果只是颜色、布局微调，更高效的方式是预先在同一个CSS文件中定义不同类，通过JavaScript切换body上的类名。
CSS示例：
.theme-light { background: white; color: black; }
.theme-dark { background: black; color: white; }
JavaScript切换：
function toggleTheme() {
document.body.classList.toggle('theme-dark');
}
这种方式性能更好，避免网络请求，适合频繁切换的场景。
基本上就这些方法。选择哪种方式取决于你的需求：简单样式变化用类名切换，复杂主题分离可换CSS文件。关键是在运行时通过JS控制link标签或元素class。不复杂但容易忽略细节，比如确保路径正确、避免重复加载。
