Блог

Главная - Вопросы по программированию - загрузка CSS с помощью jQuery без применения стилей к странице

загрузка CSS с помощью jQuery без применения стилей к странице

#javascript #jquery

#javascript #jquery

Вопрос:

Я загружаю файл CSS динамически после запуска document.ready функции. Это то, что у меня есть:

 $.get(TheCSSTag.href, function () {

    alert('loaded');
    DoSomething();

}, "text/css");

Проблема в том, что предупреждение срабатывает нормально (что, я полагаю, означает загруженный CSS), но стили не применяются к элементам HTML.

Примечание: другие решения, которые включают создание тега CSS и добавление в DOM, подобные этому document.getElementsByTagName('head')[0].appendChild(TheCSSTag); , не работают для меня, потому что мне нужна функция обратного вызова для выполнения при загрузке файла CSS.

Комментарии:

1. В вашем коде нет ничего, что показывало бы, что CSS добавляется в документ, или $.get() делает это, если вы добавляете "text/css" туда?

2. Загрузка файла CSS динамически обычно является плохой идеей. Чего вы пытаетесь достичь?

3. @AnthonyGarcia: css загружается с клиента в зависимости от разрешения экрана.

4. @frenchie: Вы рассматривали медиа-запросы ?

5. @AnthonyGarcia: нет, имя CSS определяется во время выполнения. Медиа-запросы не будут работать для этого.

Ответ №1:

Дело в том… На самом деле вы не указываете браузеру использовать CSS. Вы просто просите jQuery получить это для вас. Внутри обратного $.get вызова вам нужно фактически внедрить его на свою страницу.

Вот пример использования jQuery, в котором вы читаете все и помещаете его в style тег внутри head :

 $.when($.get('your_css_file.css')).done(function (response) {
    $('<style />').text(response).appendTo($('head'))
})

Другим способом было бы просто добавить URL-адрес в заголовок:

 $('<link /')
    .attr('type', 'text/css')
    .attr('rel', 'stylesheet')
    .attr('href', 'your_css_file.css')
    .appendTo($('head'))

Ответ №2:

Вам нужно добавить файл CSS на страницу. $.get() не сделает этого за вас.

 $.get(TheCSSTag.href, function(){

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

}, "text/css");

Пожалуйста, обратите внимание: без разрешений xdomain $.get будет загружать только локальные файлы, хотя вы можете просто добавить их в head, не используя сначала $.get .

Метки: