首頁 >web前端 >css教學 >如何在 jQuery 中動態套用內聯或外部 CSS 來修復 Chrome AJAX 樣式問題?

如何在 jQuery 中動態套用內聯或外部 CSS 來修復 Chrome AJAX 樣式問題?

Patricia Arquette
Patricia Arquette原創
2024-12-15 12:49:39549瀏覽

How Can I Dynamically Apply Inline or External CSS in jQuery to Fix Chrome AJAX Styling Issues?

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

您想要使用jQuery 將Ajax 彈出式視窗載入至Yahoo 彈出視窗並套用自己的CSS CSS 給它。有兩個選項:內聯樣式表或外部樣式表。但是,您發現在 Chrome 中,使用標準方法新增至 DOM 時,不會評估透過 AJAX 載入的 CSS。

為了解決此問題,jQuery 提供了幾種方法來評估或應用動態添加的樣式表到DOM:

加載內聯CSS

使用AJAX:

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

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

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

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

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

這些解決方案應該在彈出視窗中有效地載入和應用CSS,讓您可以為Ajax 載入的內容維護單獨的樣式。

以上是如何在 jQuery 中動態套用內聯或外部 CSS 來修復 Chrome AJAX 樣式問題?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn