使用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。