JavaScript挿入ダイナミックスタイル

CSSスタイルをHTMLページに含めることができる要素は二つあります.ここで、＜link＞要素は外部からのファイルを含むために使用され、＜style＞要素は埋め込みスタイルを指定するために使用される.ダイナミックスクリプトと似ています.ダイナミックスタイルとは、ページの読み込み時には存在しないスタイルのことです.ダイナミックスタイルは、ページの読み込みが完了したら、ページに動的に追加します.
私たちは次のような典型的な要素を例に挙げます.
 

<link rel="stylesheet" type="text/css" href="style.css">

 
 
DOMコードを使用すると、この元素は簡単に動的に作成できます.
 

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

 
 
以上のコードはすべての主流ブラウザで正常に実行できます.注意したいのは、要素ではなく、要素をに追加しないと、すべてのブラウザでの動作が一致することが保証されません.全体のプロセスは関数で表現できます.
 

function loadStyles(url){
    var link = document.createElement("link");
    link.rel ="stylesheet";
    link.type ="text/css";
    link.href = url;
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(link);}
loadStyles("style.css")

 
 
外部のスタイルファイルをロードするプロセスは非同期です.つまり、スタイルをロードするプロセスとJavaScriptコードを実行するプロセスは決まった順序がありません.
もう一つの定義スタイルの方式は、組み込みCSSを含むために