javascript - 使用 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 的回调中，您需要将其实际注入(inject)到您的页面中。

这是一个使用 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'))