Javascriptで動的にCSSファイルを追加する

2008年8月24日 19:59

jQueryやprototype.jsなどのライブラリとともに、CSSファイルを同時に読み込ませる必要がある場合があると思います。
そんなとき、そのライブラリと一緒にCSSなんかも外部jsファイルから追加できると便利です。
外部jsファイルのスクリプトからCSSを動的に読み込ませるスクリプトサンプルです。

「Javascriptで動的にCSSを追加する」サンプル

▼EntryMore▼

Javascriptソース

今回のポイントは、「document.createElement」と「document.getElementsByTagName」です。
前者を使って動的にlink要素を生成し、後者を使ってhead要素を取得します。

そして、その取得したhead要素に対して要素を追加する「appendChild」を実行します。
「appendChild」は指定した要素に対して特定の要素を追加するメソッドです。
ここで1点注意として、「document.getElementsByTagName」で取得した要素は配列になります。
そのため、head.appendChild...（ここでのheadは変数です）としてもうまく動きません。

取得した"head要素そのもの"を指定するには「head.item(0)」として、変数headのitem(0)（配列の0番目のデータ）にアクセスして「appendChild」を実行します。

また、これを使ってhead要素の代わりにdiv要素に対して実行すると、その最後に特定の要素を追加することができます。

つまり、指定した要素に対して入れ子の状態で特定の要素を追加できる、というわけです。
これを応用すれば動的にscript要素を追加することも可能です。