Rumah >hujung hadapan web >tutorial css >Mengapa Helaian Gaya CSS Dimuatkan Secara Dinamik Saya Hanya Berfungsi dalam Beberapa Pelayar (dan Bagaimana Saya Boleh Membetulkannya)?

Mengapa Helaian Gaya CSS Dimuatkan Secara Dinamik Saya Hanya Berfungsi dalam Beberapa Pelayar (dan Bagaimana Saya Boleh Membetulkannya)?

Linda Hamilton
Linda Hamiltonasal
2024-11-25 14:30:14738semak imbas

Why Do My Dynamically Loaded CSS Stylesheets Only Work in Some Browsers (and How Can I Fix It)?

Memuatkan Lembaran Gaya CSS Secara Dinamik dalam IE

Pemuatan CSS dinamik selalunya terbukti tidak ternilai untuk mencipta reka bentuk responsif yang meminimumkan kependaman pemuatan halaman. Walau bagaimanapun, apabila menggunakan teknik ini, pengguna sering mendapati bahawa gaya mereka hanya terpakai pada beberapa penyemak imbas pilihan mereka.

Dalam contoh di bawah, gaya CSS berjaya dimuatkan dalam Firefox dan Google Chrome tetapi gagal dimuatkan dalam Internet Explorer (IE).

var head = document.getElementsByTagName('head')[0];
$(document.createElement('link'))
    .attr({ type: 'text/css', href: '../../mz/mz.css', rel: 'stylesheet' })
    .appendTo(head);

Penyelesaian:

Perbezaan timbul daripada cara IE mengendalikan pemprosesan lembaran gaya. Tidak seperti penyemak imbas lain, IE hanya membenarkan lampiran lembaran gaya setelah enjin gaya terbina dalamnya telah menghuraikan semua gaya yang dimuatkan dengan halaman. Untuk memintas perkara ini, kami memanfaatkan kaedah document.createStyleSheet(url), yang boleh menambah helaian gaya semasa proses pemuatan.

url = 'style.css';
if (document.createStyleSheet)
{
    document.createStyleSheet(url);
}
else
{
    $('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head'); 
}

Dengan menggabungkan kaedah ini, kami memastikan CSS digunakan dalam semua penyemak imbas, malah mereka yang mempunyai gelagat pemuatan unik Internet Explorer.

Atas ialah kandungan terperinci Mengapa Helaian Gaya CSS Dimuatkan Secara Dinamik Saya Hanya Berfungsi dalam Beberapa Pelayar (dan Bagaimana Saya Boleh Membetulkannya)?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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