Firefox不遵守rel = stylesheet链接的'disabled'属性

问题描述

我有一个网站，需要加载两个主题.用户可以打开/关闭第二个主题.我目前正在通过使用链接中的disabled标记来实现此目的，

I have a site that requires two themes to be loaded. The second theme can be toggled on/off by the user. I'm currently accomplishing this by using the disabled tag in the link like so:

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

然后我在JavaScript中切换disabled.

I then toggle disabled in JavaScript.

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

This works great in Safari (Mac), Chrome (Mac/Windows), and IE10. However, Firefox (both Mac and Windows) seems to ignore the disabled tag on page load and displays the second theme on initial load (as it is loaded second). When I manually toggle disabled, however, Firefox does respond to the tag and will begin to switch the second theme on/off.

我如何实现这个目标?

推荐答案

我发现了一种似乎在所有浏览器中都起作用的解决方法.似乎这不是最好的方法，但我想分享.

I found a workaround that seems to be functional in all browsers. This does NOT seem like it should be the best way to do it but I wanted to share.

由于某些原因，这不是理想的选择，但是我试图使其简化，并且没有像jQuery这样的任何外部库依赖项，因为这需要放置在您的head标记中，并且此时您可能尚未加载JS库.

This is not ideal for a few reasons but I tried to make it streamlined and without any external library dependency like jQuery because this needs to be placed in your head tag and you probably have not loaded your JS libraries at that point.

<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后再应用于样式表，则它似乎仅对禁用的标记作出响应.我仍然觉得自己缺少了一些东西，因为这似乎很疯狂.

NOTE: Firefox seems to only respond to the disabled tag if it is applied to the stylesheet after it has been added to the DOM. I still feel like I'm missing something because that seems crazy.

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

So, if you were to put style.disabled = true; before you add the style to your document then Firefox does not recognize the disabled state of the stylesheet.

这篇关于Firefox不遵守rel = stylesheet链接的'disabled'属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！