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

CSS スタイルをその場で交換する

Web ページの CSS スタイルを動的に変更して、あるスタイルシートを別のスタイルシートに置き換えたいと考えています。バニラ JavaScript または jQuery では、必要なすべてのスタイルシートを含めて、それらを選択的にアクティブ化または非アクティブ化することでこれを実現できます。

オプション 1: rel=alternate の切り替え

スタイルシートを含める「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: 設定と切り替えを無効にします

「rel=stylesheet」でスタイルシートを含めますおよび "class=alternate" を指定し、その "disabled" プロパティを切り替えます:

<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;
}</code>

オプション 3: media=none を切り替えます

「」を含むスタイルシートを含めるmedia=none" を指定し、その "media" 属性を切り替えます:

<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、またはその他のメソッドを使用してスタイルシート ノードを選択します。必要に応じて、さらに行列を作成するには jQuery を使用します。このアプローチにより、ページをリロードせずに CSS スタイルをその場で切り替えることができます。

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