WebページのCSSスタイルをリアルタイムに切り替える

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 はドメイン名に置き換えられることに注意してください):

テーマ A

テーマ B

任意のリンクをクリックすると、対応する "a" または " が記録されますb" を Cookie に追加すると、Cookie の値を読み取り、対応する CSS を導入する XHTML を出力するスクリプトが必要になります:

title="現在選択したテーマ" href=".css" />

スタイルを切り替える必要があるすべてのページはこのコードを追加する必要があるため、Web サイトのヘッダー ファイルに直接追加するだけです。もちろん、必要に応じてこのスクリプトを変更できますが、一般的な考え方は同じままにする必要があります。

<リンク rel="スタイルシート" type="text/css"

title="テーマ A" href="a.css" />

title="テーマ B" href="b.css" />
上記はリアルタイムで Web ページを切り替えるための CSS スタイルの実装内容です。その他の関連記事については、PHP 中国語 Web サイト (www.php.cn) に注目してください。