リロードせずに Web ページ上の CSS スタイルを動的に変更するにはどうすればよいですか?-jsチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-10-30 10:36:03

オリジナル

397 人が閲覧しました

How can I dynamically change CSS styles on a web page without reloading?

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 サイトの他の関連記事を参照してください。