如何使用 jQuery 動態載入內聯或外部 CSS？

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

使用jQuery 透過AJAX 載入HTML 內容時，可能需要包含特定的CSS正確渲染的樣式。但是，動態新增的 CSS 在插入時可能不會被瀏覽器評估。

動態CSS 注入選項

有多種方法可以將CSS 動態注入DOM：

內聯StyleSheet

動態建立元素並將其附加到

中部分：

var myCSS = 'body { background-color: red; }';
$('<style type="text/css">').html(myCSS).appendTo('head');

外部樣式表

使用jQuery 的$.get() 方法載入外部CSS 檔案：

$.get('myStyles.css', function(css) {
  $('<link rel="stylesheet" type="text/css" href="myStyles.css">').appendTo('head');
});

動態建立標籤

建立一個動態元素並將其附加到

中部分：

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

動態建立 with @import

在動態建立的

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

支援的瀏覽器

動態新增時，Internet Explorer 將評估內聯 CSS，但 Chrome 需要使用 @import 來評估外部 CSS。 Firefox 對動態 CSS 注入的支援可能會因版本而異。

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