とことん標準に拘ったCSS切り替えスクリプト（その4）

とことん標準に拘ったCSS切り替えスクリプト（その3） (agenda)の続き。今回からは具体的な設計に入ります。

どういうオブジェクトを扱おうか

「CSSの集合」をオブジェクトとして考えてみました。これを暫定的に「CSSList」と呼ぶことにします。つまり、例えばCSSを全て無効にする場合には：

CSSList.disableAll();

このような形式になります（disableAllはCSSを全て無効にするメソッド）。

既にあるじゃないか

そんな感じである程度煮詰めたのですが、CSSの集合、というか「スタイルシートのリスト」を扱うオブジェクトは既に存在するではありませんか。そう、document.styleSheetsです。先程の例はこうなります：

document.styleSheets.disableAll();

このように既存のオブジェクトの拡張を行なった方が直感的かと思われました。実装するには次のようにします。

document.styleSheets.disableAll = function(){
	for (var i=0,len=this.length; i<len; i++)
		this.item(i).disabled = true;
};

こんな調子でメソッドをどんどん加えていけば良いのですが、少し脱線して遊んでみました。

脱線：インターフェイスの拡張

今更ですが、document.styleSheetsはオブジェクトです。ということはそれを作成した「鋳型」を参照できるかも知れません：

var StyleSheetList = document.styleSheets.constructor

こいつが関数オブジェクトであったなら占めたもの：

if (StyleSheetList instanceof Function) {
	StyleSheetList.prototype.disableAll = function(){/*..*/};
}
document.styleSheets.disableAll();

このように、インターフェイスを拡張できます。ただ、今回の場合インスタンスがdocument.styleSheets唯一つしかあり得ないので、悲しいことに、document.styleSheetsに直接メソッドを追加する方法と何の違いもありません。何れにしろ「鋳型」、というかコンストラクタを参照できるかどうかは実装依存なので、ウェブページ用のスクリプトには使用できません。

因みにMozillaの場合、Elementインターフェイスを持ったオブジェクトを作成するコンストラクタは「Element」で参照できますから、こんなことができたりします：

Element.prototype.suicide = function(){
	this.parentNode.removeChild(this);
};
//使用例
document.body.suicide();

脱線終わり。

問題点?

というわけで、スタイルシートのリストを表すdocument.styleSheetsというオブジェクトを中心に、CSS切り替え機能を考えていくことになりました。主役は常にdocument.styleSheetsです。

オブジェクト指向なんて私は知りませんが、このようにオブジェクトを中心に考えると、JavaScriptは実に「しっくり」きます。「スタイルシートのリスト」を扱うオブジェクトが無かったら、自作していたでしょう（というかしました）。それだけの話です。

しかし自作した方が安全ではあります。

• document.styleSheetsにメソッドを追加するとエラーになるブラウザがあるかも知れない
• 切り替えスクリプト利用者が既に同名のメソッド（あるいはプロパティ）を追加していた場合、上書きしてしまうことになる

このような不安があるのです。この辺りを一応念頭に置きつつ、今後考えてゆくことになります。