Comment puis-je appliquer dynamiquement du CSS en ligne ou externe avec jQuery pour le contenu AJAX ?

Application dynamique de CSS en ligne ou externe avec jQuery

Lors de l'intégration de contenu Ajax dans une page à l'aide de jQuery, il devient nécessaire de gérer le CSS appliqué à ce contenu. Cet article explore les méthodes permettant d'appliquer du CSS en ligne ou de charger dynamiquement des feuilles de style CSS externes pour garantir une présentation correcte du contenu chargé.

Problème

Chargement du contenu Ajax dans une fenêtre contextuelle Yahoo à l'aide La méthode .get de jQuery provoque des problèmes avec l'application du CSS généré dynamiquement. Chrome n'évalue pas le CSS ajouté au DOM en ligne, contrairement à Internet Explorer. Trouver un moyen d'évaluer le CSS chargé dynamiquement en ligne ou externe est essentiel.

Solution

jQuery fournit plusieurs méthodes pour charger et évaluer dynamiquement le CSS :

Chargement du CSS en ligne avec AJAX

$.get(myStylesLocation, function(css) {
   $('<style type="text/css"></style>')
      .html(css)
      .appendTo("head");
}); 

Chargement d'un CSS externe avec un créé dynamiquement

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

Chargement d'un CSS externe avec un

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

$('<style type="text/css">@import url("' + myStylesLocation + '")</style>')
    .appendTo("head");

Ces méthodes permettent le chargement et l'évaluation dynamiques de CSS pour le contenu chargé de manière asynchrone, garantissant un style et une présentation appropriés du contenu chargé à l'utilisateur.

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!