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

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!