JavaScript/CSSの動的ローディング

バージョンと製造年月日

2009年06月12日

原理

link 要素を document.createElement して head 要素に appendChild する。

動的にロードしたStyleSheetオブジェクトを掴む

document.styleSheets プロパティを監視する。 ローディングが完了したようだったら、link 要素を生成する際にロードする URL に適当に一意になるようなパラメータをくっつけておいて、StyleSheet オブジェクトの href プロパティから値を取り出しパラメータを照合すれば目的の StyleSheet オブジェクトを掴むことができる。

オリジナルのオレオレ属性や、title プロパティを使うともっと楽そうなんだけど safari とかの関係で href を使うのが無難という今の判断

こうすると、汎用的な CSS を JavaScript で生成するような部分的な CSS に変換して適用することができるようになるので、CSS が書き換えられないという状況の場合使える。

Tag