使用jQuery加载CSS而不将样式应用于页面

Question

我在触发document.ready函数后动态加载CSS文件。 这就是我所拥有的：

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

    alert('loaded');
    DoSomething();

}, "text/css");

问题在于警报触发得很好（我认为这意味着加载了CSS），但是样式未应用于HTML元素。

注意：涉及到创建CSS标记并附加到DOM的其他解决方案，例如document.getElementsByTagName('head')[0].appendChild(TheCSSTag); 对我不起作用，因为加载CSS文件时需要执行回调函数。

Answer 1

问题是……您实际上并没有在告诉浏览器使用CSS。 您只是在问jQuery为您提供它。 在$.get回调内部，您需要将其实际注入到页面中。

这是一个使用jQuery的示例，您在其中阅读了全部内容并将其放入head内部的style标签中：

$.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'))

Answer 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只会加载本地文件，尽管您可以直接将它们添加到头部，而无需先使用$ .get。