如何应用与jQuery动态加载的内联和/或外部CSS [英] How to apply inline and/or external CSS loaded dynamically with jQuery

问题描述

我有一个加载到使用jQuery雅虎弹出一个Ajax控件。

I have an Ajax control that is loaded into a Yahoo popup using jQuery.

我只是用一个简单的。获得请求加载HTML。

I just use a simple .get request to load the HTML.

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

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

Now the problem is that the content that is loaded needs its own CSS which is actually dynamically created. I have a choice of either inlining the or using an external CSS stylesheet.

测试在Chrome中显示，通过AJAX加载的CSS是不计算/加在它使用的是上面的code添加到DOM的时间。

Testing in Chrome shows that the css loaded via AJAX is not evaluated/applied at the time it is added to the DOM using the above code.

Internet Explorer将评估一个内联CSS的时候，它只是卡在DOM而Chrome不会。我现在不能因为一个完全无关的问题，在Firefox中进行测试。

Internet explorer WILL evaluate an inlined css when it just gets stuck in the DOM but Chrome will not. I am currently unable to test in FireFox because of a completely unrelated issue.

有没有办法在jQuery来评估被动态添加到DOM的要么是内联或？

Is there any way in jQuery to evaluate a stylesheet that was dynamically added to the DOM as either an inline or ?

有很多原因，我想做到这一点：

There are many reasons I'd like to do this :

• 在弹出的CSS属于弹出，并且可以从不同的环境完全未来
• 在它是动态的，我不希望把它的父页面，除非我绝对有
• 我打算为它工作像这样与它不！ ： - （

推荐答案

给定一个路径到您的样式表（或部分的URL，将产生有效的CSS）：

Given a path to your stylesheet (or some URL that will generate valid CSS):

var myStylesLocation = "myStyles.css";

......无论是其中之一应该工作：

...either one of these should work:

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

使用

负载动态创建＆LT;链接＆GT;

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

使用

负载动态创建＆LT;风格＆GT;

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

或

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

这篇关于如何应用与jQuery动态加载的内联和/或外部CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！