小编典典

如何应用通过jQuery动态加载的内联和/或外部CSS

css

我有一个使用jQuery加载到Yahoo弹出窗口中的Ajax控件。

我只是使用一个简单的.get请求来加载HTML。

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

现在的问题是,加载的内容需要自己的CSS,而CSS实际上是动态创建的。我可以选择内联或使用外部CSS样式表。

在Chrome中进行的测试表明,使用上述代码将通过AJAX加载的css添加到DOM时未进行评估/应用。

当Internet
Explorer仅停留在DOM中时,它将评估内联的CSS,但Chrome不会。由于完全不相关的问题,我目前无法在FireFox中进行测试。

jQuery是否有任何方法可以评估以内联或动态添加到DOM的样式表?

我想这样做的原因有很多:

  • 弹出窗口中的css属于弹出窗口,并且可能完全来自不同的环境
  • 它是动态的,除非绝对必要,否则我不想将其放在父页面中
  • 我计划它像这样工作,但事实并非如此!:-(

阅读 332

收藏
2020-05-16

共1个答案

小编典典

给定样式表的路径(或 一些 将生成有效CSS的URL):

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");

使用动态创建的