html - Firefox 没有遵守 rel=stylesheet 链接的 'disabled' 属性

Question

我的网站需要加载两个主题。第二个主题可以由用户打开/关闭。我目前正在通过在链接中使用 disabled 标记来完成此操作，如下所示:

<link rel="stylesheet" href="{{main css}}">
<link rel="stylesheet" title="theme-white" href="{{2nd theme css}}" disabled>

然后我在 JavaScript 中切换 disabled。

这在 Safari (Mac)、Chrome (Mac/Windows) 和 IE10 中效果很好。但是，Firefox(Mac 和 Windows)似乎在页面加载时忽略了 disabled 标记，并在初始加载时显示第二个主题(因为它是第二个加载的)。但是，当我手动切换 disabled 时，Firefox 会响应该标签并将开始打开/关闭第二个主题。

我怎样才能实现这个目标？

Answer 1

我找到了一个似乎在所有浏览器中都有效的解决方法。这似乎不是最好的方法，但我想分享。

由于一些原因，这并不理想，但我试图使其精简并且没有任何外部库依赖性，如 jQuery，因为这需要放在你的 head 标签中，你可能还没有加载你的那时的 JS 库。

<script>
    window.onload = function() {
        var path  = "css";
        var style   = document.createElement( 'link' );
        style.rel   = 'stylesheet';
        style.href   = '/your/css/url.css';
        document.getElementsByTagName( 'head' )[0].appendChild( style );
        style.disabled = true;
    };
</script>

注意:Firefox 似乎只响应已添加到 DOM 后应用于样式表的禁用标记。我仍然觉得我错过了什么，因为这看起来很疯狂。

因此，如果您将 style.disabled = true; 添加到文档之前，那么 Firefox 将无法识别样式表的禁用状态。