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

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 href 替换当前的 CSS href，瞧？

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

我使用的是 jQuery 1.4。

---

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

http://dev.jquery.com/ticket/6061#comment:1 —“是的，这是正确的 - 解析 直接 HTML 我们只保证 body 元素的内容。如果你 希望访问页面的 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>