Question

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

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

    alert('loaded');
    DoSomething();

}, "text/css");

问题是警报触发正常（我认为这意味着加载了CSS），但样式不适用于HTML元素。

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

Answer 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'))

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。

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

2 个答案: