4

私は、昼用と夜用の 2 つのスタイルシートを持つサイトを持っています。onclickスタイルシートを変更する関数を呼び出すイベントを含む画像があります。問題は、新しい訪問者が最初にボタンをクリックしたとき、ページが 0.5 秒間完全にスタイル設定されていない状態 (スタイルシートなし) になり、その後新しいページが開始されることです。rel="stylesheet"新しいシートに追加する前に、現在のシートの 新しい訪問者でも少しの遅延がないように、機能を改善する方法はありますか? ありがとう。

function changeStyleSheet() {
    var a = document.getElementById('stylesheet1');
    var b = document.getElementById('stylesheet2');
    var now1 = $(a).attr('rel');
    var now2 = $(b).attr('rel');
    if (now1 == 'stylesheet') {
        a.setAttribute('rel', 'alt-stylesheet');
        b.setAttribute('rel', 'stylesheet');
    } else {
        b.setAttribute('rel', 'alt-stylesheet');
        a.setAttribute('rel', 'stylesheet');
    }
};
4

4 に答える 4

4

属性の設定順序を入れ替えてみましたか? 最初に切り替え先のスタイルシートの rel 属性を設定してから、切り替え先のスタイルシートの rel 属性を設定しますか?

HTML で両方の rel 属性をスタイルシートに設定し、ページの読み込み時に JavaScript を使用して、それらの 1 つを別のスタイルシートに変更します。

于 2012-04-14T15:58:13.687 に答える
1

id2つの別々のスタイルシートを維持する必要がない場合は、内の親要素にを適用するだけで目的を達成する方が簡単な場合がありますbody。私のデモでは、body簡単にするために要素を使用しましたが、それが不可能な場合は、サイトのコンテンツをでラップして、divそれに追加することができidます。次に、CSSセレクターの前にid関連するスタイルを適用するだけです。

私のデモでは、次のJavaScriptを使用しています。

var sel = document.getElementById('styles'),
    b = document.getElementsByTagName('body')[0];
sel.onchange = function() {
    b.id = this.value;
};​

そしてCSS：

#styles1 h1 {
    margin-top: 1em;
    color: #f00;
    background-color: #000;
    text-align: center;
    font-size: 2em;
}

#styles1 div {
    width: 80%;
}

#styles2 h1 {
    margin-top: 1em;
    color: #000;
    background-color: #fff;
    text-align: right;
    font-size: 1.5em;
    font-style: italic;
}

#styles2 div {
    width: 50%;
    margin: 0 auto 1em auto;
}

/* the following is for the element holding the style-switcher select */
#styles1 #themes,
#styles2 #themes {
    width: auto;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
}​

JSフィドルデモ。

上記では、スタイルシートがすでにロードされているため、スタイルが変更されてもちらつきに気付かないはずです。ページが特に複雑な場合は、ちらつきが見える可能性がありますが、新しいスタイルシートに切り替える際のちらつきよりもはるかに短いはずです。

于 2012-04-14T16:44:35.117 に答える
1

これらの線に沿った何かを持っていないのはなぜですか:

JavaScript

function changeStyle() {
    document.getElementById('stylesheet').href = 'style2.css';
}

HTML

<input type="button" onclick="changeStyle();"/>
<link rel="stylesheet" href="style1.css" id="stylesheet">

または、複数のスタイルシートでこれを試してください

トグルの場合、これを試してください：

function changeStyle() {
    var a = document.getElementById('stylesheet').href;
    if (a === 'style1.css') {
        document.getElementById('stylesheet').href = 'style2.css';
    } else {
        document.getElementById('stylesheet').href = 'style1.css';        
    }
}​
于 2012-04-14T15:40:06.300 に答える
0

2 つのスタイルシートの構造が非常に似ている場合を除き、奇妙なちらつき/レンダリングが発生します。

変更の順序 (あなたが望んでいる):

  • シート 1 - 適用済み
  • シート 2 - 適用済み
  • シート 1 - 削除

つまり、ほんの少しの間、両方のスタイル シートが適用されます (両方ともカラー パレットを設定するだけで、すべて同じ要素に設定されている場合は問題ありませんが、より詳細/重要な場合は問題になります)。

これが問題になる場合は、スタイル シートの変更を見栄えのするものにすることを検討してください。たとえば、スタイルが変更される前にページや要素をフェードアウトし、スタイルを変更してからフェードインするなどです。

問題がなければ、jacktheripper が提供するアプローチを使用できるはずです。

于 2012-04-14T16:07:29.913 に答える