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

ページ スタイル変更のための動的 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 サイトの他の関連記事を参照してください。