問題
外部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を配置した上で実行してください。
コメント