CSS スタイルをリアルタイムで切り替える
W3C 標準で構築された Web サイトは、理論的にはパフォーマンスと構造の完全な分離を実現できます。たとえば、スケルトン (構造、XHMTL) や筋肉 (動作、JavaScript) を移動せずに、スキン (パフォーマンス、CSS) を完全に変更できます。
もちろん、スキンを変更する前に、W3C 標準に従って Web サイトを構築し、パフォーマンスの異なる 2 つの CSS セットを準備する必要があります。 「スキンの変更」は本質的に「CSS の変更」と同じで、何らかの方法を使用してブラウザーに別の CSS セットをロードさせてページを再レンダリングするだけです。方法はたくさんありますが、代表的な 3 つを紹介します。
方法 1: 何もしません
?何もしない？そうですね、これは…正確に言うと、ちょっとだけやってみてください（そんな良い事があると思いますか…）。
2 つの異なるファイル a.css と b.css に囲まれた 2 つの CSS セットがあるとします。次に、次の 2 行の XHTML コードを
と の間に追加します。
次に、Firefox でこのページを開き、メニュー バーで [表示] -> [ページ スタイル] を選択します。次の「風景」:
とても簡単です。Firefox を使用して「再スキン」することができます。いえ？ IEにはこの機能がありません...MSは本当に愚かです。W3Cはブラウザがユーザーに独自のスタイルシートを選択する権限を提供することを「明示的に推奨」していますが、それを実行しません。幸いなことに、この問題はそれほど複雑ではないので、やってみましょう。
[セパレータ]
方法 2: Javascript
方法 1 に基づいて、JavaScript の DOM メソッドを使用してリンク オブジェクトにアクセスし、不要な CSS を「無効」に設定すると、残りの CSS が有効になります。ブラウザがページをレンダリングするために使用します。スクリプトは次のとおりです。コメントに注意してください:
次に、適切な場所でこの関数を呼び出し、このページを例として次の 2 つのボタンを追加します:
方法 3: サーバーサイド スクリプト
最高の CSS スイッチャーはサーバーサイド スクリプト (PHP、ASP、JSP など) を使用して開発する必要があることに疑いの余地はありません。この利点は明白です。直接的、効率的、優れた互換性、ユーザーの選択を記憶でき、異なる CSS を組み合わせて非常に複雑な「スキン」切り替えを実現することもできます。
ここでは例として PHP を使用します。他の言語でも同様なので、一般の開発者にとってはそれほど難しいことではありません。
基本的な考え方は次のとおりです。ユーザーは「スキン」を選択し、ユーザーの選択を Cookie に記録します (データベースにも同じことが当てはまりますが、システムのオーバーヘッドは高くなります)。ユーザーの選択は Cookie に記録されます。前のユーザーの選択を Cookie (またはデータベース) から読み取り、対応する CSS ファイルを読み込みます (ここでも、方法 1 で説明した a.css と b.css を例にします)。
次の内容を含む switcher.php という名前のファイルを作成します:
このスクリプトは、最初にクエリ データを読み取り、次にパラメータ スタイルの値を記録します。 . Cookie を入力して、最後に前のページに戻ります。次に、スタイルを切り替えるための 2 つのリンクを作成し、ホームページやユーザー管理バックエンドなどの適切なページに配置します (site.com はドメイン名に置き換えられることに注意してください):
テーマ B
任意のリンクをクリックすると、対応する "a" または " が記録されますb" を Cookie に追加すると、Cookie の値を読み取り、対応する CSS を導入する XHTML を出力するスクリプトが必要になります:
<リンク rel="スタイルシート" type="text/css"
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
