問題 × 解決策

【専用の関数を作りました】外部CSSファイルをjavascriptで読み込む

問題

外部CSSファイルをJavascriptからどのページからでも楽に読み込ませたい。

解決策

専用の関数を用意しておき、それを使い回す。

 

Javascriptからの外部CSSファイルの読み込みを楽にする。

外部CSSファイルをJavascriptから読み込ませる方法は、以下の記事をご覧ください。
外部CSSファイルをJavascriptから読み込む方法

今回はこちらの続きの内容となります。

前回ですと、特定のページで何行か必要となってしまい、そのページのみ突如特定のCSSファイルを読み込む場面ではとても面倒に感じたので、専用の関数を作りました。
読み込みを1行で完結させます。

専用の関数

専用の関数は、外部javascriptを読み込む関数を応用して作成しました。
外部javascriptのjavascriptでの読み込みに関しては以下の記事をご覧ください。
外部javascriptファイルをJavascriptから読み込む方法

専用の関数の記述は以下になります。

var css_elem = document.getElementsByTagName("link");
var css_path = css_elem[css_elem.length-1].href.substring(0, css_elem[css_elem.length-1].href.lastIndexOf("/")+1);
function cssloader( url, fullpass) {
	var css_file = document.createElement("link");
	css_file.setAttribute("rel","stylesheet");
	css_file.setAttribute("type","text/css");
	var path = css_path + url;
	if( fullpass !== undefined ){
		if( fullpass == "true" ){
			// フルパスならば、引数「url」をそのまま使用する
			path = url;
		}
	}
	css_file.setAttribute("href",path);
	document.getElementsByTagName("head")[0].appendChild(css_file);
};

ここに注意!

専用の関数における記述は、サイトのheadタグで、常時使用するcssの読み込みの後に読み込むようにしてください。
この関数は、常時使用するcssの格納場所のパスを取得し、そのパスを利用します。

専用の関数を利用しての読み込み方法

専用の関数を利用しての読み込み方法は以下になります。

// 読み込みたいCSSファイル
// cssloader( ①, ② )
// ① CSSファイル名+拡張子、またはhttp://(https://)から始まるCSSファイルのフルパス
// ② フルパスか否かの情報(フルパスならば"true"、フルパスでないならば"false")
//   ※ trueの場合、①にフルパスを記述する
cssloader('CSSファイル名.css', "false");

ここに注意!

この関数は、常時使用するcssの格納場所のパスを取得し、そのパスを利用しますので、フルパスでない場合は、cssの格納場所と同じ場所にcssを配置した上で実行してください。

コメント

コメントを残す

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

four × four =

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

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