31

jQuery 中是否有$.getScript等价物，但用于加载样式表？

4

4 回答 4

45

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 对此有问题，您可能需要像在回答中那样做才能使其工作：

https://stackoverflow.com/a/2685639/618206

编辑2：

读取文件内容并将其内联（在<style>标签之间）也是一个有效的解决方案，但这样 CSS 将不会被浏览器缓存。

于 2013-02-17T10:00:46.407 回答
6

我创建了一个$.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 上，所以如果需要，我可以更新它。

于 2016-02-03T21:15:29.133 回答
2

您可以使用相同的方法 $.getScript 来“下载”样式表，因为 $.getScript 实际上只是另一个 HTTP 请求。但它会有点连线，因为 css 是不可执行的。

于 2013-02-17T10:01:41.047 回答
1

这是一个函数，它将加载带有成功或失败回调的 CSS 文件。我认为这种方法比公认的答案更好，因为使用 HREF 将元素插入 DOM 会导致额外的浏览器请求（尽管请求可能来自缓存，具体取决于响应标头）。

function loadCssFiles(urls, successCallback, failureCallback) {

    $.when.apply($,
        $.map(urls, function(url) {
            return $.get(url, function(css) {
                $("<style>" + css + "</style>").appendTo("head");
            });
        })
    ).then(function() {
        if (typeof successCallback === 'function') successCallback();
    }).fail(function() {
        if (typeof failureCallback === 'function') failureCallback();
    });

}

用法如下：

loadCssFiles(["https://test.com/style1.css", "https://test.com/style2.css",],
    function() {
    alert("All resources loaded");
}, function() {
    alert("One or more resources failed to load");
});

这是另一个同时加载 CSS和javascript 文件的函数：

function loadJavascriptAndCssFiles(urls, successCallback, failureCallback) {

    $.when.apply($,
        $.map(urls, function(url) {
            if(url.endsWith(".css")) {
                return $.get(url, function(css) {
                    $("<style>" + css + "</style>").appendTo("head");
                });
            } else {
                return $.getScript(url);
            }
        })
    ).then(function() {
        if (typeof successCallback === 'function') successCallback();
    }).fail(function() {
        if (typeof failureCallback === 'function') failureCallback();
    });

}
于 2019-08-15T11:09:51.150 回答