問題 × 解決策

外部CSSファイルをJavascriptから読み込む方法

問題

外部CSSファイルをJavascriptから読み込ませたい。

解決策

linkタグを生成し、リンク先等を設定してheadタグの最後に挿入する。

 

外部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);
}

参考

【JavaScriptでスタイルシートを読み込む方法】
https://kaworu.jpn.org/kaworu/2008-05-24-2.php

【Node.appendChild – Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Node/appendChild

【createElementの使い方( しゃいん☆のブログ| 名古屋市 Webシステム開発 サーバ構築 ネットワーク構築 株式会社コネクティボ )】
http://shain.blog.conextivo.com/2007/03/createelement.html

【element.setAttribute – Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Element/setAttribute

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

four × five =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧