jqueryでの季節に基づいてスタイルシートを変更する方法を見つけようとしています。この時点では、このサイトでPHPやRubyを使用できるかどうかは不明です。あなたのお返事ありがとう!jQueryの月/シーズンに基づいてスタイルシートを変更する
答えて
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>");
にだけで簡単に例を変更したい場合は、それは私が考えるシート全体をロードするよりも、それがより効率的になるだろう。
.someStyle{ color:blue;}
.summer .someStyle{color:yellow;}
.winter .someStyle{color:purple;}
...
の形で1つのCSSで.summerの下にあるすべてのクラスをすべてのあなたの宣言を置くページは準備ができたときに、サーバー/クライアント上で、その後の夏
のデフォルトのスタイルをオーバーライドします - これを追加クラスを体にする
クライアントで唯一の問題は、デフォルトのスタイルが最初にレンダリングされ、次に新しいスタイルに切り替わるということです(サイトのユーザーに最も一般的なシーズンを選んでください。夏を選択;-)
最も簡単なのは、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\"">");
- 1. jQueryでAJAX結果に基づいてDOMを変更する
- 2. jqueryはCookieに基づいてフォントサイズを変更しますか?
- 3. jQuery - 入力フィールドに基づいて隠し値を変更
- 4. selectlyputに基づいてグラフのy変数を変更する
- 5. リンクのhref属性をjQueryのテキストに基づいて変更する
- 6. OpenCartのルートに基づいてページにCSSスタイルシートを追加
- 7. jQueryのCSSクラスに基づいて変数を設定する
- 8. ウィンドウのバージョンに基づいてコントロールのビジュアルスタイルを変更する
- 9. 条件に基づく月
- 10. 月に基づいて数値を加算する
- 11. GUI:コンボボックスの値に基づいてパネルを変更する
- 12. CSSスタイルのバインディングに基づいてaria-labelを変更する
- 13. 現在の `filetype`に基づいて` filetype`を変更する
- 14. linuxの変更日に基づいてファイルをコピーする
- 15. イメージをラッパーの高さに基づいて変更する
- 16. ドロップダウンに基づいてHTMLの内容を変更する
- 17. ラジオボタンの回答に基づいてフレームを変更する
- 18. DataTriggerに基づいてボタンのClickイベントを変更する
- 19. Flex:データバインディングイベントの内容に基づいてコントロールプロパティを変更する
- 20. tabbarcontrollerアイテムのクリックに基づいてビューを変更する
- 21. jQuery:インラインスタイルの幅に基づいてCSSの色を変更します
- 22. jQuery - クリックに基づいて画像を変更してください
- 23. .cssファイルに基づいてロゴを変更するには、
- 24. JRadioButtonに基づいてJPanelを動的に変更する
- 25. 別のTextBox変更イベントに基づいてTextBox値を変更する方法
- 26. MFCアプリケーション:XSLTスタイルシートに基づいてXMLファイルを印刷
- 27. everyauth.twitter.redirectPath( '/'); - 元のページのURLに基づいて変更する
- 28. デバイス解像度に基づいてビューポートを変更する
- 29. ReactJS:クリックイベントに基づいて経路を変更する
- 30. 選択したオプションに基づいてテキストフィールドを変更する
多数の変更をロードすると、そのプロセスが中断され、スタイルのないコンテンツのフラッシュが発生します。 –