7

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>

I then toggle disabled in JavaScript.

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.

How can I accomplish this goal?

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>

注: DOM に追加された後にスタイルシートに適用された場合、Firefox は無効化されたタグにのみ応答するようです。それはクレイジーに見えるので、私はまだ何かが欠けているように感じます。

そのため、ドキュメントにスタイルを追加するstyle.disabled = true; 前に配置した場合、Firefox はスタイルシートの無効状態を認識しません。

于 2013-08-14T21:21:48.203 に答える
1

ここでパーティーに遅れましたが、Firefox でもこの問題に遭遇しました。無効な属性がJavascriptを介してスタイルシートに適用される方法に関係していたことが判明しました。

2 つのスタイルシート間で無効状態を切り替える何らかのトリガーを想定して、以下のコードを参照してください。最初の関数は私が最初に試したもので、後者は最終的にうまくいったものです。

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 に答える