jQuery 我可以根据要求加载外部样式表吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2126238/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I load external stylesheets on request?
提问by eozzy
$.getScript('ajax/test.js', function() {
alert('Load was performed.');
});
.. like the above code which loads an external JS on request, is there something similar available to load an external CSS stylesheet when required?
.. 就像上面根据请求加载外部 JS 的代码一样，是否有类似的东西可以在需要时加载外部 CSS 样式表？
Like for example when I use lightboxes (inline popups) on my site, I want to avoid loading lightbox JS and CSS files onload, unless requested by the user.
例如，当我在我的网站上使用灯箱（内联弹出窗口）时，我想避免加载灯箱 JS 和 CSS 文件，除非用户要求。
Thanks
谢谢
回答by Paul D. Waite
Yup: if you create a <link>tag linking to a stylesheet and add it to the <head>tag, the browser will load that stylesheet.
是的：如果您创建一个<link>链接到样式表的<head>标签并将其添加到标签中，浏览器将加载该样式表。
E.g.
例如
$('head').append('<link rel="stylesheet" type="text/css" href="lightbox_stylesheet.css">');
However, as per @peteorpeter's comments, this doesn't work in IE 8 or under — there, you need to either:
但是，根据@peteorpeter 的评论，这在 IE 8 或更低版本中不起作用 - 在那里，您需要：
- append the
<link>beforesetting itshref; or - use IE's
document.createStyleSheet()method
<link>在设置它之前附加href; 或者- 使用IE的
document.createStyleSheet()方法
Also, checking whether a link has already been added doesn't work reliably across all browsers.
此外，检查链接是否已添加在所有浏览器中都不能可靠地工作。
I would also question part of your premise:
我也会质疑你的部分前提：
I want to avoid loading lightbox JS and CSS files onload, unless requested by the user.
我想避免在加载时加载灯箱 JS 和 CSS 文件，除非用户要求。
Why? To reduce page weight? I can understand the desire, but you should measure the size of your CSS and JS files (after minification and gzipping) with the lightbox code in there, and without, to see whether the reduction is worth:
为什么？减少页面重量？我可以理解这种愿望，但是您应该使用灯箱代码测量 CSS 和 JS 文件的大小（在缩小和 gzip 之后），看看减少是否值得：
- the added complexity of loading on-demand; and
- the slightly reduced responsiveness of the lightbox (because when loading on-demand, the lightbox will have to wait for its own CSS and JS to load before it can do its thing)
- 按需加载的额外复杂性；和
- 灯箱的响应能力略有降低（因为在按需加载时，灯箱必须等待自己的 CSS 和 JS 加载才能执行其操作）
After minification and gzipping, there may well not be that much difference.
在缩小和压缩之后，可能没有那么大的区别。
And bear in mind that you can instruct the browser to cache your CSS and JS for a long time, meaning it only gets downloaded when a user visits your site with an empty cache.
请记住，您可以指示浏览器长时间缓存您的 CSS 和 JS，这意味着只有在用户访问您的网站时缓存为空时才会下载它。
回答by Cody
$('<link/>', {rel: 'stylesheet', href: 'myHref'}).appendTo('head');
回答by Reigel
You could do:
你可以这样做：
$('<link>').attr('rel','stylesheet')
.attr('type','text/css')
.attr('href','link_to.css')
.appendTo('head');
回答by zombat
You can add references to external stylesheets simply by adding dynamic HTML content in the head:
您可以通过在头部添加动态 HTML 内容来添加对外部样式表的引用：
$('head').append('<link rel="stylesheet" href="style.css" type="text/css" />');
This content gets inserted in the DOM, and subsequently rendered normally, in this case causing a fetch of an external stylesheet.
此内容被插入到 DOM 中，然后正常呈现，在这种情况下会导致获取外部样式表。
Pay attention to cletus' answer as well however, as if you're not careful with dynamic loading of static content, it can end up costing you in page load time and excessive resource transfer.
但是，也要注意 cletus 的回答，如果您对静态内容的动态加载不小心，最终可能会导致页面加载时间和资源转移过多。
回答by user541072
IE issues...
IE问题...
I was crashing IE 6,7,8 with
我崩溃了 IE 6,7,8
$('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'assets/css/jquery.fancybox-1.3.4.css') );
Just copied them into the main sheet to avoid another http req, voila.
只是将它们复制到主表中以避免另一个 http 请求，瞧。
回答by cletus
Generally you're better off just including all you need assuming you're doing so correctly.
一般来说，假设你做得正确，你最好只包括你需要的一切。
By that I mean that best practice for static content (images, Javascript, CSS) is to:
我的意思是静态内容（图像、Javascript、CSS）的最佳实践是：
- minimize external HTTP requests (minimize # of files);
- version the files and use a far futures Expires header;
- minify and compress content as appropriate.
- 最小化外部 HTTP 请求（最小化文件数量）；
- 版本文件并使用远期期货 Expires 标头；
- 根据需要缩小和压缩内容。
so a user will only ever download a given file once until it changes.
所以用户只会下载给定的文件一次，直到它发生变化。
Dynamically loading CSS and Javascript, unless it is exceptionally large, is typically unwarranted and counterproductive.
动态加载 CSS 和 Javascript，除非它特别大，否则通常是没有根据的和适得其反的。
回答by subindas pm
We can append it directly by
我们可以直接通过
$("head").append($("<link rel='stylesheet' href='style.css' type='text/css' media='screen' />"));
