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

Linda Hamilton
Lepaskan: 2024-10-30 10:36:03
asal
329 orang telah melayarinya

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

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>
Salin selepas log masuk
<code class="javascript">function enableStylesheet (node) {
  node.rel = 'stylesheet';
}

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

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>
Salin selepas log masuk
<code class="javascript">function enableStylesheet (node) {
  node.disabled = false;
}

function disableStylesheet (node) {
  node.disabled = true;
}</code>
Salin selepas log masuk

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>
Salin selepas log masuk
<code class="javascript">function enableStylesheet (node) {
  node.media = '';
}

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

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!