Rumah > Artikel > hujung hadapan web > 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!