動態加載 css 樣式表在 IE 上不起作用

Question

我像這樣動態加載一個 css 樣式表（在 jQuery 的幫助下）：

var head = document.getElementsByTagName('head')[0];
$(document.createElement('link'))
    .attr({ type: 'text/css', href: '../../mz/mz.css', rel: 'stylesheet' })
    .appendTo(head);

這在 Firefox 和 Google Chrome 中工作正常，但在 IE 中無效。

有什么幫助嗎？ 謝謝

Answer 1

一旦 IE 處理了頁面加載的所有樣式，添加另一個樣式表的唯一可靠方法是使用document.createStyleSheet(url)

有關更多詳細信息，請參閱有關 createStyleSheet 的MSDN 文章。

url = 'style.css';
if (document.createStyleSheet)
{
    document.createStyleSheet(url);
}
else
{
    $('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head'); 
}

Answer 2

您需要最后設置 href attr 並且僅在鏈接 elem 附加到頭部之后：

$('<link>')
  .appendTo('head')
  .attr({type : 'text/css', rel : 'stylesheet'})
  .attr('href', '/css/your_css_file.css');

更新

現在 IE 和 Edge 的唯一目的是下載 Chrome，所以我建議不要用對 IE 或 Edge 的自定義支持來膨脹你的代碼，而只是忽略它們的存在。

Answer 3

這似乎也適用於 IE：

var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = '/includes/style.css';
document.getElementsByTagName('head')[0].appendChild(link);

Answer 4

這可能也與它有關 - 取自Microsoft 支持文章：

在 Microsoft Internet Explorer 版本中加載頁面時，網頁上的樣式丟失或看起來不正確...

...發生此問題的原因是 Internet Explorer 中滿足以下條件：

• 不應用前 31 個樣式標簽之后的所有樣式標簽。

• 不應用前 4,095 條規則之后的所有樣式規則。

• 在使用@import 規則連續導入導入其他樣式表的外部樣式表的頁面上，深度超過三層的樣式表將被忽略。

Answer 5

看起來

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

也可以在 IE 中使用，只要 url 是包含協議的完全限定 URI...

Answer 6

在沒有打開調試器的情況下打開 ie8。 當您到達動態樣式表之后……打開調試器，瞧，它們應該在那里。