How can I dynamically change CSS styles on a web page without reloading?-JS Tutorial-php.cn

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

Linda Hamilton

Release： 2024-10-30 10:36:03

Original

398 people have browsed it

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

Swap CSS Styles on the Fly

You want to dynamically change the CSS style of a web page, replacing one stylesheet with another. In vanilla JavaScript or jQuery, you can achieve this by including all necessary stylesheets and then selectively activating or deactivating them.

Option 1: Toggle rel=alternate

Include stylesheets with "rel=alternate" and toggle their state:

<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

Option 2: Set and Toggle disabled

Include stylesheets with "rel=stylesheet" and "class=alternate", and toggle their "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;
}</code>

Copy after login

Option 3: Toggle media=none

Include stylesheets with "media=none" and toggle their "media" 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

Select a stylesheet node using getElementById, querySelector, or other methods. Use jQuery for further procession if desired. This approach allows you to switch CSS styles on the fly without reloading the page.

The above is the detailed content of How can I dynamically change CSS styles on a web page without reloading?. For more information, please follow other related articles on the PHP Chinese website!