如何用jQuery在ajax请求后替换整个页面的CSS？
[英]How to replace entire CSS of a page after an ajax request with jQuery?
问题描述
I have a document with one CSS linked in. How can I replace the current CSS with one coming from a document that I just fetched with AJAX request using jQuery? 
我有一个链接了一个CSS的文档。如何使用来自我刚刚使用jQuery使用AJAX请求获取的文档中的一个替换当前的CSS？
Here's the code I am trying right now, but with no success so far: 这是我现在正在尝试的代码，但到目前为止没有成功：
$(function() {
$.get('next_page.html', function(data, textStatus) {
$('link[rel=stylesheet]:first')
.attr('href', $(data).find('link[rel=stylesheet]:first').attr('href'));
});
});
Update: $.find() does not work in any browser (tested Firefox 3.5, Chrome and Safari 3 on Mac), but $.filter() found the stylesheet only in Firefox 3.5 - still nothing in Chrome and Safari 3.
It should be plain simple, right - replace the current CSS href with the new one, and voilá? 它应该很简单，正确 - 用新的CSS替换当前的CSS href，并且voilá？
For some reason, jQuery fails to find anything inside the <head> tag that is coming from AJAX request. 出于某种原因，jQuery无法在来自AJAX请求的<head>标记内找到任何内容。 Furthermore, jQuery even fails to find the whole <head> itself from the AJAX data. 此外，jQuery甚至无法从AJAX数据中找到整个<head>本身。 In other words, $(data).find('head').size() inside the callback function returns 0. 换句话说，回调函数内的$(data).find('head').size()返回0。
I am using jQuery 1.4. 我正在使用jQuery 1.4。
UPDATE Feb 10, 2010: I filed a bug about this to jQuery and they agreed it is not possible to find anything from the <head> tag from an ajax data. 更新2010年2月10日：我向jQuery提交了一个关于此问题的错误，他们同意不可能从ajax数据的<head>标记中找到任何内容。 Here's the response I got: 这是我得到的回应：
http://dev.jquery.com/ticket/6061#comment:1 — "Yep, that's correct - parsing straight HTML we only guarantee the contents of the body element. If you wish to access the XML of the page directly then I recommend that you explicitly make the file .xhtml or request it as XML, for example:"
4 个解决方案
解决方案1
2 2010-01-27 13:29:12
This jquery should do it: 这个jquery应该这样做：
$(document).ready(function() {
$.get("next_page.html", function(data) {
$("link[rel='stylesheet']").attr("href", $(data).filter("link[rel='stylesheet']").attr("href"));
});
});
解决方案2
1 2010-01-27 12:09:29
Try this: 试试这个：
$.load('next_page.html', function(data) {
$('link[rel=stylesheet]:first').replaceWith($(data).find('link[rel=stylesheet]:first'));
});
You were not actually making an AJAX call in your own example, perhaps that was the problem or you just forgot to add the .load part? 您实际上并没有在自己的示例中进行AJAX调用，也许这就是问题，或者您只是忘了添加.load部分？ This should work just fine, given that it is inside the $(document).ready(function() { ... }); 这应该可以正常工作，因为它在$(document).ready(function() { ... }); block. 块。
解决方案3
1 已采纳 2010-02-10 16:55:32
根据jQuery开发团队的说法这是有效的 - “解析直接HTML我们只保证body元素的内容。如果你想直接访问页面的XML，那么我建议你明确地生成文件.xhtml或者请求它作为XML ， 例如：”
$.ajax({ dataType: "xml", file: "some.html", success: function(data){ ... });
解决方案4
0 2012-11-16 21:54:49
i have it working on my site. 我在我的网站上工作。 I simply added an id to my link tag where my css is loaded. 我只是在我的链接标签中添加了一个id，我的css已经加载了。 and then you change the attri href (you got that part right). 然后你改变了attri href（你得到了那个部分）。
HTML: HTML：
<link type="text/css" href="/llt_style/skin/nuit.css" rel="stylesheet" id="llt_skin_href"/>
And the i use a select to let the user choose his skin. 而我使用选择让用户选择他的皮肤。
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.