JavaScript による動的スタイル実装コードの挿入_JavaScript スキル-jsチュートリアル-php.cn

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

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

この要素は、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 は