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

カテゴリ:Javascript小技 2008年8月24日 19:59

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

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

▼EntryMore▼

Javascriptソース

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

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

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

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

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

この記事のカテゴリー一覧を見る⇒Javascript小技

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/94