如何仅在指定CSS文件未找到时加载替代CSS文件？

这里有两种可靠的方案，能确保只有一个CSS文件被加载，避免规则冲突：

方案一：利用link标签的onerror事件触发备用加载 #

直接在主样式的link标签上绑定错误事件，加载失败时动态替换成备用样式：

<!-- 主样式文件 -->
<link rel="stylesheet" href="main.css" onerror="switchToFallback()">

<script>
function switchToFallback() {
  // 移除加载失败的主样式标签（可选，清理DOM）
  const failedLink = document.querySelector('link[href="main.css"]');
  if (failedLink) failedLink.remove();
  
  // 创建并插入备用样式标签
  const fallbackLink = document.createElement('link');
  fallbackLink.rel = 'stylesheet';
  fallbackLink.href = 'fallback.css';
  document.head.appendChild(fallbackLink);
}
</script>

原理很直接：主CSS加载失败（比如404、网络错误）时，onerror事件会触发，执行函数移除失效的主标签，再插入备用样式，确保页面只会生效一套规则。

方案二：预检测主CSS可用性再加载 #

如果想提前判断主CSS是否能正常访问，用fetch做预请求，再决定加载哪个：

<script>
// 先尝试请求主CSS
fetch('main.css')
  .then(res => {
    if (res.ok) {
      // 主CSS可用，插入主样式
      const mainLink = document.createElement('link');
      mainLink.rel = 'stylesheet';
      mainLink.href = 'main.css';
      document.head.appendChild(mainLink);
    } else {
      // 主CSS返回错误，加载备用
      loadFallback();
    }
  })
  .catch(() => {
    // 请求失败（比如断网、跨域问题），加载备用
    loadFallback();
  });

function loadFallback() {
  const fallbackLink = document.createElement('link');
  fallbackLink.rel = 'stylesheet';
  fallbackLink.href = 'fallback.css';
  document.head.appendChild(fallbackLink);
}
</script>

这种方式从根源上避免了加载失败的主CSS出现在DOM里，适合对DOM整洁度要求高的场景。如果主CSS是跨域资源，要注意CORS配置，此时方案一的onerror方式会更稳妥。

注意事项 #

• 务必确保两个CSS的路径正确，别因为路径写错误触发备用加载
• 绝对不要静态同时引入两个CSS，必须通过上述动态方式保证只有一套生效

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