如何使用 jQuery 為 AJAX 內容動態套用內聯或外部 CSS？

使用jQuery 動態應用內聯或外部CSS

使用jQuery 將Ajax 內容整合到頁面中時，有必要管理所應用的CSS到該內容。本文探討了應用內嵌 CSS 或動態載入外部 CSS 樣式表的方法，以確保正確呈現載入的內容。

問題

使用以下方式將 Ajax 內容載入 Yahoo 彈出視窗中jQuery 的 .get 方法會導致應用動態產生的 CSS 時出現問題。 Chrome 不會評估內嵌加入 DOM 的 CSS，但 Internet Explorer 會評估。找到一種方法來評估動態載入的CSS，無論是內聯還是外部載入都是至關重要的。

解決方案

jQuery 提供了幾種動態載入和評估CSS 的方法：

載入內聯CSSAX AJ

AJ

$.get(myStylesLocation, function(css) {
   $('<style type="text/css"></style>')
      .html(css)
      .appendTo("head");
}); 

AJ

AJ AJ AJ

AJ

$('<link rel="stylesheet" type="text/css" href="'+myStylesLocation+'">')
   .appendTo("head");

AJ

AJ AJ AJ

AJ

$('<style type="text/css"></style>')
    .html('@import url("' + myStylesLocation + '")')
    .appendTo("head");

$('<style type="text/css">@import url("' + myStylesLocation + '")</style>')
    .appendTo("head");

使用動態建立的使用動態建立的載入外部CSS

以上是如何使用 jQuery 為 AJAX 內容動態套用內聯或外部 CSS？的詳細內容。更多資訊請關注PHP中文網其他相關文章！