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