如何利用rel=alternate实现多套CSS主题自由切换？-css教程-PHP中文网

rel="alternate stylesheet"仅预加载不启用，必须用JS同步修改disabled和rel为"stylesheet"才能生效；所有可切换主题的link必须带唯一title，切换函数需遍历所有link并按title精准控制启用状态。

如何利用rel=alternate实现多套css主题自由切换？

rel="alternate stylesheet" 本身不支持“自由切换”——它只是让浏览器预加载备用样式表，但是否启用、如何启用，全靠 JS 控制 disabled 和 rel 属性。真正起作用的不是 alternate，而是你手动触发的激活逻辑。

为什么必须同时改 `rel` 和 `disabled`

只设 link.disabled = false 不够：浏览器仍按 rel="alternate stylesheet" 处理，不会渲染该样式表。必须同步把 link.rel 改成 "stylesheet"，才能让它真正生效。

rel="alternate stylesheet" 表示“已加载但不启用”，仅用于预加载和语义标记
rel="stylesheet" 才是浏览器实际应用样式的触发条件
切换时旧主题要设 disabled = true，新主题要设 disabled = false 且 rel = "stylesheet"

HTML 中 `title` 属性必须全部统一

混用带/不带 title 的会导致行为不可控。比如：

<link href="reset.css" rel="stylesheet"><link href="default.css" rel="stylesheet" title="Default"><link href="dark.css" rel="alternate stylesheet" title="Dark">

此时 reset.css 总是加载并生效；default.css 作为默认主题也生效；dark.css 虽然预加载，但无法干净地“替换”掉 default.css ——因为没有 title 的 link 不参与主题切换逻辑。

所有可切换主题的必须带 title，且值唯一（如 "light"、"dark"）
确保只有一个 rel="stylesheet" 且有 title 的 link（即当前激活的主题）
其余备选主题统一用 rel="alternate stylesheet" + title

JS 切换函数必须遍历全部 `link` 元素

不能只操作某个 id 或 class，因为浏览器不认这些，只认 rel、title、disabled 这三个原生属性。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

典型写法：

function setActiveStyleSheet(title) {
  const links = document.querySelectorAll('link[rel="stylesheet"], link[rel="alternate stylesheet"]');
  links.forEach(link => {
    if (link.title === title) {
      link.disabled = false;
      link.rel = "stylesheet";
    } else if (link.title) {
      link.disabled = true;
    }
  });
}