JavaScript による動的スタイル実装コードの挿入_JavaScript スキル

動的スクリプトと同様に、いわゆる動的スタイルは、ページが最初に読み込まれた時点では存在しないスタイルを指します。動的スタイルは、ページが読み込まれた後にページに動的に追加されます。

次の典型的な 要素を例に挙げてみましょう。

この要素は、DOM コードを使用して動的に簡単に作成できます:

コードをコピー コードは次のとおりです:

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

上記のコードはすべての主要なブラウザで正常に実行できます。すべてのブラウザで一貫した動作を保証するには、 要素を 要素に追加する必要があることに注意してください。プロセス全体は次の関数で表すことができます:

コードをコピー コードは次のとおりです:

関数loadStyles( url) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = url ;
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
loadStyles("style.css"); 🎜>

外部スタイル ファイルの読み込みプロセスは非同期です。つまり、スタイルの読み込みと JavaScript コードの実行のプロセスに固定された順序はありません。

スタイルを定義するもう 1 つの方法は、次のように

同じロジックに従って、次の DOM コードが有効になります:




コードをコピー


コードは次のとおりです。

var style = document.createElement("style"); style.type = "text/css"; style.appendChild( document .createTextNode("body{background-color:red;}")); var head = document.getElementsByTagName("head")[0]; head.appendChild(style); 🎜 >

上記のコードは Firefox、Safari、Chrome、Opera で実行できますが、IE ではエラーが報告されます。 IE は