Загружать внешний файл css, например скрипты в jquery, который совместим, т.е. Также

Ответ 1

В jQuery 1.4:

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

http://api.jquery.com/jQuery/#jQuery2

Ответ 2

Быстрая функция, основанная на ответах.

loadCSS = function(href) {

  var cssLink = $("<link>");
  $("head").append(cssLink); //IE hack: append before setting href

  cssLink.attr({
    rel:  "stylesheet",
    type: "text/css",
    href: href
  });

};

Использование:

loadCSS("/css/file.css");

Ответ 3

$("head").append("<link>");
var css = $("head").children(":last");
css.attr({
      rel:  "stylesheet",
      type: "text/css",
      href: "address_of_your_css"
});

Ответ 4

Я думаю, что OP хотел сделать, это загрузить таблицу стилей асинхронно и добавить ее. Это работает для меня в Chrome 22, FF 16 и IE 8 для наборов правил CSS, сохраненных в виде текста:

$.ajax({
    url: href,
    dataType: 'text',
    success: function(data) {
        $('<style type="text/css">\n' + data + '</style>').appendTo("head");                    
    }                  
});

В моем случае я также иногда хочу, чтобы загруженный CSS заменил ранее загруженный CSS-код. Чтобы сделать это, я поставил комментарий в начале, скажем: "/* Отметить этот ID = 102 */", а затем я могу это сделать:

// Remove old style
$("head").children().each(function(index, ele) {
    if (ele.innerHTML && ele.innerHTML.substring(0, 30).match(/\/\* Flag this ID=102 \*\//)) {
        $(ele).remove();
        return false;    // Stop iterating since we removed something
    }
});

Ответ 5

    //load css first, then print <link> to header, and execute callback
    //just set var href above this..
    $.ajax({
          url: href,
          dataType: 'css',
          success: function(){                  
                $('<link rel="stylesheet" type="text/css" href="'+href+'" />').appendTo("head");
                //your callback
            }
    });

Для JQuery 1.2.6 и выше (исключая функции причудливых атрибутов выше).

Я делаю это так, потому что Я думаю, что это обеспечит загрузку вашей запрашиваемой таблицы стилей ajax, прежде чем пытаться вставить ее в голову. Поэтому обратный вызов выполняется после того, как таблица стилей готова.

Ответ 6

Исходя из вашего комментария под ответом @Raul, я могу придумать два способа включить обратный вызов:

1. Пусть getScript вызовет файл, который загружает CSS.
2. Загрузите содержимое файла css с помощью AJAX и добавьте к <style>. Ваш обратный вызов будет обратным вызовом из $.get или любого другого, который вы используете для загрузки содержимого файла css.

Ответ 7

Вот функция, которая будет загружать файлы CSS с обратным вызовом в случае успеха или неудачи. Обратный вызов сбоя будет вызван только один раз, если один или несколько ресурсов не загрузятся. Я думаю, что этот подход лучше, чем некоторые другие решения, потому что вставка элемента в DOM с HREF вызывает дополнительный запрос браузера (хотя, скорее всего, запрос будет поступать из кэша, в зависимости от заголовков ответа).

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();
    });

}

Ответ 8

$( "# pageCSS" ). attr ('href', './css/new_css.css');