Meningkatkan pengalaman pengguna laman web anda dengan membiarkan pelawat memperibadikan aspek seperti saiz fon dan bahasa. Tutorial ini menunjukkan cara membina penukar gaya dan menggunakan storan tempatan untuk mengingati keutamaan.
Konsep Utama:
Switchers gaya meningkatkan UX dengan membenarkan pemperibadian. Penyimpanan tempatan memastikan keutamaan disimpan di antara lawatan. -
Pelaksanaan melibatkan HTML untuk penukar, CSS untuk gaya, dan JavaScript untuk mengendalikan pemilihan dan penyimpanan. Pertimbangkan keserasian penyemak imbas (terutamanya versi IE yang lebih tua). -
untuk banyak gaya, menguruskannya dalam fail CSS luaran dan menukarnya daripada menukar kelas individu. -
Penyimpanan tempatan menawarkan penyimpanan berterusan (sehingga 5MB) tanpa interaksi pelayan. Semak pilihan yang disimpan pada beban halaman. -
Membina penukar:
Mulakan dengan HTML asas, termasuk elemen
untuk pemilihan gaya. Pendengar acara (menggunakan <select></select> dan polyfill untuk lebih tua iaitu) bertindak balas terhadap perubahan gaya. Fungsi addEventListener mengemas kini kelas badan berdasarkan gaya yang dipilih. Untuk projek yang lebih besar, gunakan fail CSS luaran dan swapnya menggunakan atribut switchStyles() tag link. href
Mengingati keutamaan:
Gunakan storan tempatan (
, ) untuk menyimpan dan mengambil gaya yang dipilih. Pada beban halaman, periksa keutamaan yang disimpan dan gunakannya menggunakan localStorage.setItem untuk membakar pengendali acara. localStorage.getItem
trigger('change', styleSwitcher)
Pertimbangan lanjutan:
Gaya berganda: - Untuk banyak gaya, gunakan fail CSS luaran dan swapnya dan bukannya bergantung pada perubahan kelas.
kebolehcapaian: - Pastikan kebolehcapaian papan kekunci (menggunakan ) dan keserasian pembaca skrin ().
tabindex aria-label Keserasian penyemak imbas: Gunakan polyfills untuk menyokong penyemak imbas yang lebih tua. -
Ujian:
Ujian dengan teliti pada pelayar dan peranti yang berbeza. -
Pendekatan ini menyediakan cara yang mesra pengguna untuk menyesuaikan penampilan laman web dan mengingati keutamaan untuk pengalaman pengguna yang lebih baik. Penggunaan storan tempatan mengelakkan perjalanan pusingan pelayan, menjadikannya cekap dan mesra pengguna.
Atas ialah kandungan terperinci Membuat Switcher Gaya Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
