IE で動的 CSS の読み込みが失敗するのはなぜですか? どうすれば修正できますか?

IE での動的 CSS の読み込みに失敗する: 解決策

Web ページの美しさを高めるために、CSS を動的に読み込むことが必要になることがよくあります。スタイルシート。この手法は Firefox や Google Chrome などの一般的なブラウザではシームレスに機能しますが、Internet Explorer (IE) では障害に遭遇します。

jQuery を使用して、動的 CSS 読み込みを実現する一般的な方法は次のとおりです。

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

ただし、この方法ではこのブラウザでは望ましい結果が得られないため、IE には特有の課題があります。

これを克服するにはハードルとしては、ブラウザー固有のアプローチを採用することが不可欠です。ページに読み込まれたすべてのスタイルが処理されている状況が IE で発生した場合、追加のスタイルシートを追加する唯一の信頼できる解決策は、 document.createStyleSheet(url) メソッドを利用することです。

効果的なクロスブラウザ実装は次のとおりです。次のコードを使用することで実現されます。

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

document.createStyleSheet メソッドを通じて IE の独自の動作に対応することで、これが可能になります。すべての主要なブラウザに CSS スタイルシートを動的にロードし、さまざまなプラットフォーム間で一貫した視覚的強化を保証します。

以上がIE で動的 CSS の読み込みが失敗するのはなぜですか? どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。