$ .getScript,但对于jQuery中的样式表？

Question

标题说明了一切.$.getScript在jQuery中是否有等价物,但是用于加载样式表？

Answer 1

CSS不是一个脚本,所以你不必在脚本执行的意义上"执行"它.

基本上,动态<link>创建并附加到标题的标记就足够了

$('<link/>', {
   rel: 'stylesheet',
   type: 'text/css',
   href: 'path_to_the.css'
}).appendTo('head');

要么

var linkElem = document.createElement('link');
document.getElementsByTagName('head')[0].appendChild(linkElem);
linkElem.rel = 'stylesheet';
linkElem.type = 'text/css';
linkElem.href = 'path_to_the.css';

如果你想在没有jQuery的情况下做到这一点.

浏览器将响应DOM中的更改并相应地更新页面布局.

编辑:

我已经读过旧的Internet Explorer有这个问题,你可能需要这样做才能使其工作:

/sf/answers/187994761/

编辑2:

读取文件内容并将其内联(<style>标记之间)也是一种有效的解决方案,但这样浏览器不会缓存CSS.

Answer 2

我已经创建了一个$.getScript处理样式表的替代方案。出于显而易见的原因，我将其称为$.getStylesheet。

它实现了$.Deferred对象，这意味着你可以像这样链接东西：

$.when($.getStylesheet('css/main.css'), $.getScript('js/main.js'))
.then(function () {
  console.log('the css and js loaded successfully and are both ready');
}, function () {
  console.log('an error occurred somewhere');
});

这是$.getStylesheet的小函数。它只是托管在 Github gist 上，所以我可以在需要时更新它。