Bagaimanakah Saya Boleh Memuatkan CSS Sebaris atau Luaran Secara Dinamik dengan jQuery?

Memohon CSS Sebaris atau Luaran Dimuatkan Secara Dinamik dengan jQuery

Apabila memuatkan kandungan HTML melalui AJAX menggunakan jQuery, mungkin perlu memasukkan CSS tertentu gaya untuk rendering yang betul. Walau bagaimanapun, CSS yang ditambah secara dinamik mungkin tidak dinilai oleh penyemak imbas pada masa pemasukan.

Pilihan untuk Suntikan CSS Dinamik

Terdapat beberapa pendekatan untuk menyuntik CSS secara dinamik ke dalam DOM:

Sebaris StyleSheet

Buat elemen dan tambahkannya pada bahagian:

var myCSS = 'body { background-color: red; }';
$('<style type="text/css">').html(myCSS).appendTo('head');</style>

Lembaran Gaya Luaran

Gunakan kaedah $.get() jQuery untuk memuatkan fail CSS luaran:

$.get('myStyles.css', function(css) {
  $('<link rel="stylesheet" type="text/css" href="myStyles.css">').appendTo('head');
});

Buat Dinamik Tag

Buat elemen secara dinamik dan tambahkannya pada bahagian:

$('<link rel="stylesheet" type="text/css" href="myStyles.css">').appendTo('head');

Buat Secara Dinamik dengan @import

Gunakan @import dalam elemen:

var myCSS = '@import url("myStyles.css")';
$('<style type="text/css">').html(myCSS).appendTo('head');</style>

Pelayar Disokong

Internet Explorer akan menilai CSS sebaris apabila ditambah secara dinamik, tetapi Chrome memerlukan penggunaan @import untuk CSS luaran untuk dinilai. Sokongan Firefox untuk suntikan CSS dinamik mungkin berbeza-beza bergantung pada versi.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memuatkan CSS Sebaris atau Luaran Secara Dinamik dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!