Question

我有一个链接了一个CSS的文档。如何使用来自我刚刚使用jQuery使用AJAX请求获取的文档中的CSS来替换当前的CSS？

这是我现在正在尝试的代码，但到目前为止还没有成功：

$(function() {
    $.get('next_page.html', function(data, textStatus) {
        $('link[rel=stylesheet]:first')
            .attr('href', $(data).find('link[rel=stylesheet]:first').attr('href'));
    });
});

更新： $ .find（）无法在任何浏览器中运行（经过测试的Firefox 3.5， Mac上的Chrome和Safari 3，但是 $ .filter（）仅找到样式表在Firefox 3.5中 - 仍然没有 Chrome和Safari 3。

它应该很简单，正确 - 用新的CSS替换当前的CSS href，并且voilá？

由于某种原因，jQuery无法在来自AJAX请求的<head>标记内找到任何内容。此外，jQuery甚至无法从AJAX数据中找到整个<head>本身。换句话说，回调函数内的$(data).find('head').size()返回0。

我正在使用jQuery 1.4。

更新2010年2月10日：我向jQuery提交了一个关于此问题的错误，他们同意不能从ajax数据的<head>标记中找到任何内容。 这是我得到的回应：

http://dev.jquery.com/ticket/6061#comment:1 - “是的，这是正确的 - 解析直接HTML我们只保证身体元素的内容。如果你希望访问页面的XML 直接然后我建议你明确地生成文件.xhtml或请求它为XML，例如：“

Answer 1

这个jquery应该这样做：

  $(document).ready(function() {
        $.get("next_page.html", function(data) {
            $("link[rel='stylesheet']").attr("href", $(data).filter("link[rel='stylesheet']").attr("href"));
        });
    });

Answer 2

试试这个：

$.load('next_page.html', function(data) {
    $('link[rel=stylesheet]:first').replaceWith($(data).find('link[rel=stylesheet]:first'));
});

您实际上并没有在自己的示例中进行AJAX调用，也许这就是问题，或者您只是忘了添加.load部分？这应该可以正常工作，因为它位于$(document).ready(function() { ... });块内。

Answer 3

根据jQuery开发团队的说法这是有效的 - “解析直接HTML我们只保证body元素的内容。如果你想直接访问页面的XML，那么我建议你明确地生成文件.xhtml或者请求它作为XML，例如：“

$.ajax({ dataType: "xml", file: "some.html", success: function(data){ ... });

Answer 4

我在我的网站上工作。我只是在我的链接标签中添加了一个id，我的css已经加载了。然后你改变了attri href（你得到了那个部分）。

HTML：

<link type="text/css" href="/llt_style/skin/nuit.css" rel="stylesheet" id="llt_skin_href"/>

我使用选择让用户选择他的皮肤。

<select onchange="$('#llt_skin_href').attr('href', $(this).val());">
    <option value="/llt_style/skin/jour.css">Jour</option>
    <option value="/llt_style/skin/nuit.css">Nuit</option>
</select>

如何用jQuery在ajax请求后替换整个页面的CSS？

4 个答案: