前回のエントリでいろいろ勉強になったことを書いたけど、これもdot(w).jsの副産物。

その名もloadCss.js。
使ってみたい人はどうぞご自由に。

サンプルや説明は続きにて。

ソースはたったこんだけ。

function loadCss(href, check) {

	if(typeof(check) == 'undefined') check = true;

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

	if(check) {
		var links = head.getElementsByTagName('link');
		for(var i = 0; i < links.length; i++) {
			if(links[i].href == link.href) return false;
		}
	}

	head.appendChild(link);
}

一応簡単な重複ロード確認機能もつけてみた。（style要素内でimportされているものはチェックできません；）

link.relとかじゃなくsetAttributeを使った方がいいのかなぁ･･･
まぁいいか、動いてるし！

<script type="text/javascript" src="loadCss.js"></script>
<script type="text/javascript">
	loadCss('cssファイル');
</script>

とか書けば任意のcssがその場で追加される。

例えばブログなら、テンプレートでloadCss.jsを読んでおいて、個別のエントリに必要なcssを記事内でロードするっていう使い方ができる。

僕みたいにブログでJavaScriptのサンプルを書いてる場合は便利かも。
（cssのサンプルもブログ内で簡単に紹介できるようになる…需要があるかは知らないけど。）

↓がサンプル。testをクリックすると、読み込んだ外部cssによって、リンクの背景が赤くなります。（1回限り）

test

動作確認：IE6/FF2


[参考記事]

Core JavaScript 1.5 Guide:The Employee Example:More Flexible Constructors - MDC
404 Blog Not Found:javascript - ふつうのnamespace
typeof(引数) == 'undefined'な書き方を参考に。


※ちなみに、一昨日もチラッと触れましたが、

<style type="text/css">@import "cssファイル";</style>
<link rel="stylesheet" type="text/css" href="cssファイル" />

とかをbody内に書いても手元の環境では普通に動きました。

上のようなjs使うの面倒、かつ標準とか気にしないという人は…（決しておすすめはできませんが。）