外部CSSファイルをJavascriptから読み込むメリット

外部CSSファイルをJavascriptから読み込ませることで、以下の利点があります。

• HTMLに直接記述する必要がなくなるため、全ページ共通のCSSを毎度読み込む記述を入れなくて済むようになります。
• 読み込む条件を設けて、必要な時のみ読み込むようにさせることができます。

今回は外部CSSファイルをJavascriptから読み込む方法をご紹介します。

createElementで、linkタグを生成する。

createElementを使うことで、オブジェクトを生成することができます。
これを使い、linkタグを生成します。

var css=document.createElement("link");

setAttributeで、生成した要素に属性を追加する。

生成したオブジェクトに対し、setAttributeを使用することで属性を追加することができます。
今回追加する必要のある属性は、「rel」と「style」と「href」の3つです。

css.setAttribute("rel","stylesheet");
css.setAttribute("type”,”text/css");
css.setAttribute("href","CSSファイルのパス");

appendChildで、headタグの最後に挿入する。

linkタグの設定の準備が整ったので、これをheadタグに挿入します。
appendChildを使用することで、特定の要素内の一番最後に要素を追加することができます。

document.getElementsByTagName("head")[0].appendChild(css);

外部CSSファイルを複数読み込みたい場合

外部CSSファイルを複数読み込みたい場合は、読み込むCSSファイルのパスを配列に格納し、for文で繰り返します。

var cssfile = [];
cssfile.push("CSSファイルのパス");
cssfile.push("CSSファイルのパス");
for(var i = 0; i < cssfile.length; i++){
	var css=document.createElement("link");
	css.setAttribute("rel","stylesheet");
	css.setAttribute("type","text/css");
	css.setAttribute("href",cssfile[i]);
	document.getElementsByTagName("head")[0].appendChild(css);
}

参考