答案：动态切换网页主题可通过四种方法实现。1. 动态替换link标签href，直接但可能重复请求；2. 预加载多个link并切换disabled状态，响应快但增加首屏负载；3. 使用CSS自定义属性，通过JS修改变量值，性能高适合颜色切换；4. 利用class控制html或body类名，统一管理样式，维护方便。选择依据主题复杂度与性能需求。
在现代网页开发中，实现动态切换主题（如白天/黑夜模式、不同品牌风格）是提升用户体验的重要功能。核心思路是通过 JavaScript 动态更改页面中引入的 CSS 文件，从而实现主题的实时切换。以下是几种常见且实用的实现方法。
1. 动态替换 link 标签的 href
这是最直接的方式：通过操作 DOM，修改 <link> 标签的 href 属性来加载不同的 CSS 主题文件。
HTML 结构示例：
<link id="theme-style" rel="stylesheet" type="text/css" href="default.css">
<button onclick="changeTheme('dark.css')">切换到暗色主题</button>
<button onclick="changeTheme('light.css')">切换到亮色主题</button>
JavaScript 实现：
立即学习“前端免费学习笔记（深入）”；
function changeTheme(themeUrl) {
const link = document.getElementById('theme-style');
link.href = themeUrl;
}
优点：简单明了，兼容性好。缺点：每次切换都会重新请求 CSS 文件（若已缓存则影响小）。
2. 预加载多个 link 并切换 disabled 状态
提前加载所有主题 CSS 文件，但只启用其中一个，通过控制 disabled 属性来切换显示的主题。
HTML 示例：
<link id="default-theme" rel="stylesheet" href="default.css"> <link id="dark-theme" rel="stylesheet" href="dark.css" disabled> <link id="blue-theme" rel="stylesheet" href="blue.css" disabled>
JavaScript 切换逻辑：
function changeTheme(themeName) {
// 先禁用所有主题
document.querySelectorAll('link[rel="stylesheet"]').forEach(link => {
link.disabled = true;
});
// 启用目标主题
document.getElementById(themeName + '-theme').disabled = false;
}
优点：切换无网络延迟，响应快。缺点：初始加载会多请求几个 CSS 文件，增加首屏负载。
3. 使用 CSS 自定义属性（CSS Variables）动态更新样式
将主题颜色等变量集中定义在 :root 中，通过 JS 修改变量值，实现主题切换，无需更换 CSS 文件。
CSS 示例：
:root {
--bg-color: #fff;
--text-color: #333;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
.dark-theme {
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
}
JavaScript 切换：
function setDarkTheme() {
document.documentElement.className = 'dark-theme';
}
function setLightTheme() {
document.documentElement.className = '';
}
优点：性能高，切换流畅，适合轻量级主题变化。缺点：不适用于结构差异大的复杂主题。
4. 利用 class 控制整体主题类名
在 <html> 或 <body> 上添加主题类名，所有主题样式都写在一个 CSS 文件中，通过类名隔离。
CSS 示例：
.theme-default body {
background: white;
color: black;
}
.theme-dark body {
background: #111;
color: #eee;
}
JavaScript 切换：
function switchTheme(className) {
document.body.className = className;
}
优点：维护方便，避免频繁 DOM 操作。适合主题数量不多、样式差异可控的场景。
基本上就这些常用方法。选择哪种方式取决于项目需求：如果主题差异大，推荐预加载 link 方式；如果只是颜色变化，CSS 变量更高效；追求简洁可维护，class 控制是不错选择。
