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

Posted 2023-05-08

【中文标题】如何应用 jQuery 动态加载的内联和/或外部 CSS

【英文标题】：How to apply inline and/or external CSS loaded dynamically with jQuery

【发布时间】：2010-10-22 18:24:26

【问题描述】：

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

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

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

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

在 Chrome 中的测试表明，通过 AJAX 加载的 CSS 在使用上述代码添加到 DOM 时并未评估/应用。

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

在 jQuery 中有什么方法可以评估作为内联或动态添加到 DOM 的样式表？

我愿意这样做的原因有很多：

弹出窗口中的 CSS 属于弹出窗口，可能完全来自不同的环境 它是动态的，我不想把它放在父页面中，除非我必须这样做 我计划让它像这样工作，但它没有！ :-(

【参考方案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");

使用动态创建的

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

或

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

【讨论】：

这看起来很棒。 AFAYK 这些都是“支持”的方式吗？或者这完全是 hacky？它看起来很有希望，但我担心一个浏览器不会让我这样做。

它们都是有效的，但唯一确定给定浏览器是否正确响应不断变化的 DOM 的方法是尝试它。最后两个（谢谢，gs！）还有一个额外的警告：如果您的服务器配置错误并使用错误的 MIME 类型发送您的 CSS，Firefox 将忽略它，除非您的页面处于 quirks 模式。

效果很好：$('') .appendTo("head");

可能无法在 IE7 上运行。尚未验证 - 但请参阅@user406905 的回答

如果 *** 有一个包含所有浏览器和版本的小弹出测试矩阵，我们可以标记哪些组合适用于每个答案，那就太酷了。有点像matrix.cpantesters.org/?dist=WWW-Mechanize+1.72

【参考方案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);

【讨论】：

谢谢！现在，如果我能记住我在哪里使用它，那么我可以去改变它

这适用于 ie8 但不适用于 ie7。接受的答案在两者中都不起作用。

这适用于 IE 8 document.createStyleSheet，是的：其他技术在 IE 8 中似乎非常有问题。它们可以工作，但页面越大/加载越慢，它似乎停止工作。 document.createStyleSheet到目前为止对我来说效果很好

【参考方案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);

【讨论】：

抱歉，我想将此作为评论添加到 Cris Rus 的问题中。