7

我有一个需要加载两个主题的网站。第二个主题可以由用户打开/关闭。我目前正在通过使用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 会响应标签并开始打开/关闭第二个主题。

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

4

4 回答 4

4

我找到了一种似乎在所有浏览器中都可以使用的解决方法。这似乎不应该是最好的方法，但我想分享。

由于某些原因，这并不理想，但我试图使其流线型并且没有像 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 后应用到样式表时才响应 disabled 标记。我仍然觉得我错过了一些东西，因为这看起来很疯狂。

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

于 2013-08-14T21:21:48.203 回答
4

这在 Firefox 68 中已修复。您现在可以在也包含属性值的元素上设置disabled属性。这将阻止浏览器加载该样式表，直到通过 JavaScript 或其他方法设置或删除该属性。<link>ref=stylesheetdisabledfalse

这使 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

于 2019-07-09T15:37:46.383 回答
1

在这里聚会迟到了，但我在 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 在其行为上匹配。

于 2018-02-14T23:59:07.083 回答
0

主题样式表中的所有内容都可以以类为前缀。例如，如果您的主题 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');
}
于 2013-08-14T20:09:24.600 回答