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无法识别样式表的禁用状态。

Answer 2

这里聚会很晚，但我刚刚在Firefox中遇到过这个问题。事实证明，它与如何通过Javascript将禁用属性应用于样式表有关。

请参阅下面的代码，假设某些触发器在两个样式表之间交换禁用状态。第一个功能是我首先尝试的，而后者最终是为我工作的。

var myStyles = document.getElementById('my-default-style');
var myOtherStyles = document.getElementById('my-other-style');

function thisFailsInFirefox() {
  myStyles.setAttribute('disabled', true);
  myOtherStyles.removeAttribute('disabled');
}

function thisWorksInFirefox() {
  myStyles.disabled = true;
  myOtherStyles.disabled = false;
}

thisWorksInFirefox功能似乎可以解决问题，在Chrome / Safari / Edge中维护功能，同时使Firefox与其行为相匹配。

Answer 3

主题样式表中的所有内容都可以以类为前缀。例如，如果您在主题css中有以下内容：

h1 {color: red;}
h2 {color: green;}

它变成了：

.theme-white h1 {color: red;}
.theme-white h2 {color: green;}

然后，要切换主题，您可以使用以下内容：

if (show theme) {
    $('body').addClass('theme-white');
} else {
    $('body').removeClass('theme-white');
}

Answer 4

此问题在Firefox 68中已得到修复。您现在可以在还包含import csv pairs = your_list_of_pairs returns = your_list_of_returns fieldnames = ["PAIR", "RETURNS"] with open('results.csv', 'w') as f: writer = csv.DictWriter(f, fieldnames=fieldnames) cols = list(df.columns[1:]) for i,c in enumerate(cols[:-1]): for c2 in cols[i+1:]: df['{}/{}'.format(c,c2)] = df[c]/df[c2] length = len(df['{}/{}'.format(c,c2)].index) start = df['{}/{}'.format(c,c2)].iloc[0] end = df['{}/{}'.format(c,c2)].iloc[length-1] change = str((end - start)/start) row = {"PAIR": df, "RETURNS":change} writer.writerow(row)属性值的disabled元素上设置<link>属性。这将阻止浏览器加载样式表，直到ref=stylesheet属性设置为disabled或通过JavaScript或其他方法将其删除为止。

这使Firefox在支持此功能方面与Chrome，Edge，Safari保持一致。

有关MDN的更多信息：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#Attributes

Bugzilla报告：https://bugzilla.mozilla.org/show_bug.cgi?id=1281135

Firefox不遵守“禁用”样式表

4 个答案: