jQueryの月/シーズンに基づいてスタイルシートを変更する

Question

jqueryでの季節に基づいてスタイルシートを変更する方法を見つけようとしています。この時点では、このサイトでPHPやRubyを使用できるかどうかは不明です。あなたのお返事ありがとう！

Answer 1

CSSファイルが既にロードされ、静的CSSがロードされた後にjQueryがCSSを適用するだけなので、ページ上で変更したい項目を絞り込むことをお勧めします。これらの特定のスタイル宣言をCSSの外に置くか、デフォルトとして保持することができます。たとえば、背景画像が変更された場合は、デフォルトのCSS宣言で白に設定できます。このように、ロード時には正常に見えますが、JavaScriptを使用して必要な項目をロードするだけです。

あなたが、あなたはjQueryのレディ機能付きヘッドにこれらのスタイルを適用するためにjQueryを使用することができ、

var month = new Date(); 
month = month.getMonth(); 

次に、現在の月を取得するには、JavaScriptの月の機能を使用することができます。あなたは、月番号に応じて4つのステートメントのうちの1つを選択するif/elseステートメントの単純な切り替えを行うことができます。たとえば、あなたが背景

$("head").append("<style type=\"text/css\">body {background-color: #FFF !important;}</style>"); 

にだけで簡単に例を変更したい場合は、それは私が考えるシート全体をロードするよりも、それがより効率的になるだろう。

Answer 2

.someStyle{ color:blue;}  
.summer .someStyle{color:yellow;} 
.winter .someStyle{color:purple;} 
... 

の形で1つのCSSで.summerの下にあるすべてのクラスをすべてのあなたの宣言を置くページは準備ができたときに、サーバー/クライアント上で、その後の夏
のデフォルトのスタイルをオーバーライドします - これを追加クラスを体にする

クライアントで唯一の問題は、デフォルトのスタイルが最初にレンダリングされ、次に新しいスタイルに切り替わるということです（サイトのユーザーに最も一般的なシーズンを選んでください。夏を選択;-)

Answer 3

最も簡単なのは、CSSスタイルのスコープを設定し、上位レベルにクラスを追加することです。私は通常体要素でこれを行います。ボディクラスを設定するJSを使用し、その後

body.summer ul { background-color: green; } 
body.fall ul { background-color: orange; } 
body.winter ul { background-color: white; } 
body.spring ul { background-color: pink; } 

：CSSがどのように見えるあなたが見ることができるように

...</body> 
<script ...> 
var season = (new Date()).getMonth...; 
$('body').addClass(season); 
</script> 
</html> 

を、私はすぐにbodyタグを閉じた後にこれを置きました。私はこれがあなたがそれを置いて働かせることができる最初の場所だと思うが、あなたはチェックしなければならない。ここに入れる理由は、スタイルのないコンテンツのフラッシュを防ぐことです。ページ上でたくさんのことが起こっている場合は、準備完了のコールバックの前にこのJavascriptを実行する必要があります。それは、私は実際に準備が整ったコールバックに自分のコードのほとんどを置くだけではあまり問題がないと言われています。

おそらく同じ場所にある異なるスタイルシートを簡単に読み込むこともできます。スタイルノードを作成し、最後のノードとして頭に挿入するだけです。あなたのスタイルに大きな違いがある場合は、これを実行します。維持するのはかなりトリッキーです。全体のDOMがロードされた*後に新しいスタイルシートのみ*ロードされ、その後でレンダリング処理はまだ、始まっているはずですので、それは本当に、これを行うには、サーバーサイドのスクリプトを使用するのがベストでしょう

$("head").append("<style type=\"text/css\" src=\"" + season + ".css\"">");