Bagaimana Menukar Fail CSS Secara Dinamik Tanpa Memuat Semula Halaman?

Pertukaran Fail CSS Dinamik untuk Pengubahsuaian Gaya Halaman

Masalah:

Anda mempunyai halaman web dengan fail CSS statik (light.css) dipautkan dalam pengepala. Anda memerlukan mekanisme yang lancar untuk menukar gaya halaman kepada fail CSS lain (dark.css), menggantikan gaya sedia ada.

Penyelesaian:

Untuk menukar fail CSS secara dinamik dan gunakan gaya baharu tanpa memuatkan semula halaman, anda boleh menggunakan salah satu daripada yang berikut pendekatan:

1. Togol 'rel=alternate' Atribut:

<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. Tetapkan dan Togol Harta 'dilumpuhkan':

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

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

3. Togol 'media=none' Atribut:

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

Nota:

• Anda boleh menyasarkan fail CSS tertentu menggunakan getElementById, querySelector , atau pemilih lain.
• Elakkan atribut dilumpuhkan pautan bukan standard. Menetapkan HTMLLinkElement#disabled masih boleh diterima.
• Kaedah ini membolehkan pertukaran gaya lancar tanpa menjejaskan elemen halaman yang mungkin digayakan secara dinamik oleh JavaScript.

Atas ialah kandungan terperinci Bagaimana Menukar Fail CSS Secara Dinamik Tanpa Memuat Semula Halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!