Firefox不遵守"禁用"样式表

Question

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

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

然后我disabled在javascript中切换.

这适用于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>

注意：如果在将样式表添加到 DOM 后将其应用于样式表，则 Firefox 似乎只会响应禁用的标签。我仍然觉得我错过了一些东西，因为这看起来很疯狂。

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