ページをリロードせずに CSS ファイルを動的に交換するにはどうすればよいですか?

Patricia Arquette
リリース: 2024-11-02 08:08:02
オリジナル
1000 人が閲覧しました

How to Dynamically Swap CSS Files Without Reloading the Page?

ページ スタイル変更のための動的 CSS ファイルの交換

問題:

静的 CSS ファイルを含む Web ページがあります(light.css) がヘッダーにリンクされています。ページのスタイルを別の CSS ファイル (dark.css) に切り替え、既存のスタイルを置き換えるシームレスなメカニズムが必要です。

解決策:

CSS ファイルを動的に交換するには、ページをリロードせずに新しいスタイルを適用するには、次のいずれかの方法を利用できます。

1. 「rel=alternate」属性を切り替えます:

<code class="html"><link rel="stylesheet" href="main.css">
<link rel="stylesheet alternate" href="light.css" id="light" title="Light">
<link rel="stylesheet alternate" href="dark.css" id="dark" title="Dark"></code>
ログイン後にコピー
<code class="javascript">function enableStylesheet(node) {
  node.rel = 'stylesheet';
}

function disableStylesheet(node) {
  node.rel = 'alternate stylesheet';
}</code>
ログイン後にコピー

2. 「無効」プロパティの設定と切り替え:

<code class="html"><link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="light.css" id="light" class="alternate">
<link rel="stylesheet" href="dark.css" id="dark" class="alternate"></code>
ログイン後にコピー
<code class="javascript">function enableStylesheet(node) {
  node.disabled = false;
}

function disableStylesheet(node) {
  node.disabled = true;
}

document
  .querySelectorAll('link[rel=stylesheet].alternate')
  .forEach(disableStylesheet);</code>
ログイン後にコピー

3. Toggle 'media=none' 属性:

<code class="html"><link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="light.css" media="none" id="light">
<link rel="stylesheet" href="dark.css" media="none" id="dark"></code>
ログイン後にコピー
<code class="javascript">function enableStylesheet(node) {
  node.media = '';
}

function disableStylesheet(node) {
  node.media = 'none';
}</code>
ログイン後にコピー

注:

  • getElementById、querySelector を使用して特定の CSS ファイルをターゲットにできます。 、または他のセレクター。
  • 非標準のリンク無効属性は避けてください。 HTMLLinkElement#disabled の設定も引き続き許容されます。
  • これらのメソッドを使用すると、JavaScript によって動的にスタイル設定されるページ要素に影響を与えることなく、スムーズなスタイルの切り替えが可能になります。

以上がページをリロードせずに CSS ファイルを動的に交換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!