Как применить встроенный и / или внешний CSS, динамически загружаемый с помощью jQuery

Question

У меня есть элемент управления Ajax, который загружается во всплывающее окно Yahoo с помощью jQuery.

Я просто использую простой запрос .get для загрузки HTML.

  $.get(contentUrl, null, function(response) {
         $('#dialog').find('.bd').assertOne().html(response);
     }, "waitDlg");

Теперь проблема в том, что загружаемому контенту нужен собственный CSS, который фактически создается динамически. У меня есть выбор: встроить или использовать внешнюю таблицу стилей CSS.

Тестирование в Chrome показывает, что CSS, загруженный через AJAX, не оценивается / не применяется во время его добавления в DOM с использованием приведенного выше кода.

Internet Explorer оценит встроенный CSS, когда он просто застрянет в DOM, а Chrome - нет. В настоящее время я не могу выполнить тестирование в FireFox из-за совершенно не связанной с этим проблемы.

Есть ли способ в jQuery оценить таблицу стилей, которая была динамически добавлена ​​в DOM как встроенную или?

Есть много причин, по которым я хотел бы сделать это:

• CSS во всплывающем окне принадлежит всплывающему окну и может вообще приходить из другой среды
• он динамический, и я не хочу помещать его на родительскую страницу, если мне абсолютно не нужно
• Я планировал, чтобы это работало так, и это не так! : - (

Answer 1

Указан путь к вашей таблице стилей (или некоторый URL, который будет генерировать действительный CSS):

var myStylesLocation = "myStyles.css";

... любой из них должен работать:

Загрузка с использованием AJAX

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

Загрузка с использованием динамически созданного

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

Загрузка с использованием динамически созданного

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

или

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

Answer 2

Принятый ответ не будет работать в IE 7 (и глючит в IE 8). следующие функции будут работать в IE, а также в FF и chrome / safari:

var url = 'urlOfStyleSheet.css'
if(document.createStyleSheet) {
    try { document.createStyleSheet(url); } catch (e) { }
}
else {
    var css;
    css         = document.createElement('link');
    css.rel     = 'stylesheet';
    css.type    = 'text/css';
    css.media   = "all";
    css.href    = url;
    document.getElementsByTagName("head")[0].appendChild(css);
}

Answer 3

var cssPath = "/path/to/css/";

var linkStr = document.createElement("<link rel='stylesheet' type='text/css' href='"+cssPath+"' media='screen' />");

document.getElementsByTagName("head")[0].appendChild(linkStr);