Comment puis-je charger dynamiquement du CSS en ligne ou externe avec jQuery ?

Application de CSS en ligne ou externe chargés dynamiquement avec jQuery

Lors du chargement de contenu HTML via AJAX à l'aide de jQuery, il peut être nécessaire d'inclure du CSS spécifique styles pour un rendu correct. Cependant, les CSS ajoutés dynamiquement peuvent ne pas être évalués par le navigateur au moment de l'insertion.

Options d'injection CSS dynamique

Il existe plusieurs approches pour injecter dynamiquement du CSS dans le DOM :

Feuille de style en ligne

Créez dynamiquement une

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

Feuille de style externe

Utilisez la méthode $.get() de jQuery pour charger un fichier CSS externe :

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

Créer dynamiquement Balise

Créer un élément dynamiquement et ajoutez-le au section :

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

Créer dynamiquement

Utilisez @import dans un

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

Navigateurs pris en charge

Internet Explorer évaluera le CSS en ligne lorsqu'il est ajouté dynamiquement, mais Chrome nécessite l'utilisation de @import pour que le CSS externe soit évalué. La prise en charge de Firefox pour l'injection CSS dynamique peut varier selon la version.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!