web-dev-qa-db-ja.com

IEではCSSスタイルシートの動的な読み込みが機能しません

次のように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ではnotです。

助けがありますか？ありがとう

javascriptjqueryhtmlcssinternet-explorer
72
pistacchio

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'); 
}
118
Rex M

Href属性を最後に設定する必要があるのは、リンク要素がヘッドに追加された後のみです。

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

これはIEでも動作するようです：

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

これも何か関係があるかもしれません- Microsoftサポート記事 から取得：

Microsoft Internet Explorerのバージョンでページを読み込むと、Webページのスタイルが見つからないか、正しく表示されません...

...この問題は、Internet Explorerで次の条件に該当するために発生します。

  • 最初の31個のスタイルタグの後のすべてのスタイルタグは適用されません。

  • 最初の4,095ルールの後のすべてのスタイルルールは適用されません。

  • @importルールを使用して他のスタイルシートをインポートする外部スタイルシートを継続的にインポートするページでは、3レベル以上の深さのスタイルシートは無視されます。

2
urig

のようだ

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

urlがプロトコルを含む完全修飾URIである限り、IEでも動作します...

1
campino2k

デバッガーを開かずにIE8を開きます。動的スタイルシートのポイントの後に到達すると、デバッガーと出来上がりを開くと、そこにあるはずです。

0
oliver foster