Bagaimanakah saya boleh menukar gaya CSS secara dinamik pada halaman web tanpa memuatkan semula?

Tukar Gaya CSS dengan Cepat

Anda mahu menukar gaya CSS halaman web secara dinamik, menggantikan satu helaian gaya dengan yang lain. Dalam JavaScript atau jQuery vanila, anda boleh mencapai ini dengan memasukkan semua helaian gaya yang diperlukan dan kemudian mengaktifkan atau menyahaktifkannya secara selektif.

Pilihan 1: Togol rel=alternate

Sertakan helaian gaya dengan "rel=alternate" dan togol keadaannya:

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

Pilihan 2: Set dan Togol dinyahdayakan

Sertakan lembaran gaya dengan "rel=stylesheet" dan "class=alternate", dan togol sifat "disabled" mereka:

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

Pilihan 3: Togol media=none

Sertakan helaian gaya dengan " media=none" dan togol atribut "media" mereka:

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

Pilih nod lembaran gaya menggunakan getElementById, querySelector atau kaedah lain. Gunakan jQuery untuk perarakan selanjutnya jika dikehendaki. Pendekatan ini membolehkan anda menukar gaya CSS dengan cepat tanpa memuatkan semula halaman.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menukar gaya CSS secara dinamik pada halaman web tanpa memuatkan semula?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!