Jquery 如何通过ajax将css注入文档？_Jquery_Css

Jquery 如何通过ajax将css注入文档？

jquery css

Jquery 如何通过ajax将css注入文档？,jquery,css,Jquery,Css,因此，我通过jquery的ajax方法获取数据。检索到的数据如下所示： <html> <head> <style> body { color: red; font-weight: bold; } #someElement { color: blue; padding: 1em } </style> </head> <body> <div i

因此，我通过jquery的ajax方法获取数据。检索到的数据如下所示：

<html>
<head>
  <style>
  body {
     color: red;
     font-weight: bold;
  }

  #someElement {
     color: blue;
     padding: 1em
  }
  </style>
</head>
  <body>
     <div id="header">Super</div>
     <p>blah blah blah</p>
     <div id="footer">Stuff</div>
  </body>
</html>


身体{
颜色：红色；
字体大小：粗体；
}
#某些元素{
颜色：蓝色；
填充：1米
}
超级的
废话废话
东西

如何提取样式并将其插入正在执行ajax调用的当前文档中？我试过各种jquery咒语，但都没用。我现在通过正则表达式提取css，但不确定如何将css放入当前页面：

$.ajax({
    url: '/template.html',
    success: function(data) {
        $("#header").html( $(data).find('#header').html() );
        $("#footer").html( $(data).find('#footer').html() );

        var re  = /<style>((?:[\n\r]|.)+)<\/style>/m;
        var css = re.exec(data);

        // What to do with the css??

        return;
    }
});

$.ajax({
url:“/template.html”，
成功：功能（数据）{
$（“#header”）.html（$（data.find（“#header”）.html（））；
$（“#footer”）.html（$（data.find（“#footer”）.html（））；
变量re=/（（？：[\n\r]|）+）/m；
var css=re.exec（数据）；
//如何处理css？？
返回；
}
});

我最初有一个样式表，然后简单地执行以下操作：

    if($.browser.msie) {
        $('head').html(
            '<link rel="stylesheet" href="http://c.this/template.css" type="text/css" />'+
            $('head').html()
        ); 
    }
    else {
        $('head').prepend('<link rel="stylesheet" href="http://c.this/template.css" type="text/css" />');
    }

if（$.browser.msie）{
$（'head'）.html(
''+
$（'head'）.html（）
); 
}
否则{
$（'head'）。前置（''）；
}

除了在IE8中，它会导致一些问题。

您不只是创建一个样式标记并将其插入DOM，就像插入任何其他标记一样吗

$('<style type="text/css"></style>')
    .appendTo("head")
    .html("your css text here");

$（“”）
.appendTo（“head”）
.html（“此处为您的css文本”）；

*我没有试过这个

编辑：

哦，我看到你正试图从HTML页面中提取css。有没有一种方法可以在不加载另一个页面的情况下仅获取CSS？

您是否有可能尝试解析第三方的页面

如果情况并非如此，那么为什么不独立于调用ajax的页面加载CSS呢。然后页面上的所有元素都可以使用它，甚至是ajax提供的新元素

如果您试图解析其他站点页面，则需要开发一个代理服务。

您可以使用

.filter（）

来查找

标记，从那里只需使用

document.getElementsByTagName（“head”）[0]

来附加

HTMLStyleElement

$.ajax({
    type: 'POST',
    url: "/echo/html/",
    data: {
        html: postHtml
    },
    success: function(data) {
        var style = $(data).filter("style").get(0);
        document.getElementsByTagName("head")[0].appendChild(style);
        $("#header").html($(data).filter('#header').html());
        $("#footer").html($(data).filter('#footer').html());
    }
});

在IE8/9、chrome、firefox上测试，jQuery选择器似乎在寻找id为

head

的元素。您可能需要尝试使用

$（“head”）.html（$（data.find（“head”）.html（））@josh那部分工作正常。我刚刚更新了示例，使其显示为#header而不是#head，以表明我对head元素不感兴趣。谢谢。我可能需要独立于ajax获取加载css。这实际上是我的备份计划，如果我不能让javascript来做的话。然而，正如我提到的@T9b，我希望javascript能帮我做到这一点。有可能吗？insertAfter
在上面的例子中应该是appendTo
。这很好。我想让另一个例子也起作用。将css放在自己的文档中，然后使用链接标记将其引入。然而，当我让javascript将link标记附加到头部时，IE8通过呈现注入的链接做了正确的事情，但它不断显示还有一个下载。如果我点击浏览器上的任何地方，等待下载就会消失。真烦人。