CSS ファイルを動的に交換して、リロードせずに Web ページのスタイルを変更するにはどうすればよいですか?

CSS ファイルを動的に交換してページ スタイルを変換する

Web 開発では、ページの視覚スタイルをその場で変更することが望ましいことがよくあります。これは、既存の CSS ファイルを別の CSS ファイルに置き換えることによって実現できます。ページをリロードせずに効率的にこれを行う方法は次のとおりです。

複数のスタイルシートを含める

まず、HTML ドキュメントのヘッダーにすべての潜在的な CSS ファイルを含めます。この場合、「light.css」と「dark.css」があります。

スタイルシートのアクティブ化と非アクティブ化

アクティブなスタイルシートを切り替えるには、次のいずれかを変更できます。ドキュメントとの関係、無効な属性の設定、メディア属性の調整を行います。

rel=alternate を使用

<script>
  function enableStylesheet(node) {
    node.rel = 'stylesheet';
  }

  function disableStylesheet(node) {
    node.rel = 'alternate stylesheet';
  }
</script>

設定を無効にします

<script>
  function enableStylesheet(node) {
    node.disabled = false;
  }

  function disableStylesheet(node) {
    node.disabled = true;
  }
</script>

media=none の使用

<script>
  function enableStylesheet(node) {
    node.media = '';
  }

  function disableStylesheet(node) {
    node.media = 'none';
  }
</script>

使用例

特定のターゲットを指定するには getElementById または他のセレクターを使用しますスタイルシートノード。たとえば、スタイルの交換をトリガーするボタンがある場合、次のようなことができます。

document.querySelector('#swap-button').addEventListener('click', () => {
  disableStylesheet(document.getElementById('light'));
  enableStylesheet(document.getElementById('dark'));
});

このアプローチにより、異なる CSS ファイルをシームレスに切り替え、それらのスタイルを動的に適用することができます。要素のスタイルをリセットしたり、ページをリロードしたりすることを心配してください。

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