How to Dynamically Swap CSS Files Without Reloading the Page?-JS Tutorial-php.cn

How to Dynamically Swap CSS Files Without Reloading the Page?

Patricia Arquette

Release： 2024-11-02 08:08:02

Original

1022 people have browsed it

How to Dynamically Swap CSS Files Without Reloading the Page?

Dynamic CSS File Swapping for Page Style Modification

Problem:

You have a web page with a static CSS file (light.css) linked in the header. You need a seamless mechanism to switch the page's style to another CSS file (dark.css), replacing existing styles.

Solution:

To swap CSS files dynamically and apply the new style without reloading the page, you can utilize one of the following approaches:

1. Toggle 'rel=alternate' Attribute:

<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>

Copy after login

<code class="javascript">function enableStylesheet(node) {
  node.rel = 'stylesheet';
}

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

Copy after login

2. Set and Toggle 'disabled' Property:

<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>

Copy after login

<code class="javascript">function enableStylesheet(node) {
  node.disabled = false;
}

function disableStylesheet(node) {
  node.disabled = true;
}

document
  .querySelectorAll('link[rel=stylesheet].alternate')
  .forEach(disableStylesheet);</code>

Copy after login

3. Toggle 'media=none' Attribute:

<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>

Copy after login

<code class="javascript">function enableStylesheet(node) {
  node.media = '';
}

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

Copy after login

Note:

You can target specific CSS files using getElementById, querySelector, or other selectors.
Avoid the non-standard link disabled attribute. Setting HTMLLinkElement#disabled is still acceptable.
These methods allow for smooth style swapping without affecting page elements that may be dynamically styled by JavaScript.

The above is the detailed content of How to Dynamically Swap CSS Files Without Reloading the Page?. For more information, please follow other related articles on the PHP Chinese website!