jQueryから外部CSSを読み込むには?そのテクニックを紹介

外部CSSというとヘッダー内でlinkタグを使って読み込むのが一般的

しかしjQuery(または純粋なJavaScript)を使うと動的に読み込みすることも可能です。

ここでは外部CSSをjQueryから読み込ませるテクニックについてまとめました。

外部CSSを読み込みさせる(jQueryの場合)

まず初めはjQueryを使って読み込ませる方法

やり方はlinkタグを直接作り、body要素内に追加するだけです。

その具体的なコード例は次の通り

 

まず外部CSSとして次のような outer.css というファイルを作ったとしましょう。

このスタイル自体は特に意味はありません。

例としてこのCSSファイルをjQuery内で読み込みさせたいと思います。

 

そのjQueryコード例は次の通り

まずouter.cssを読み込ませるリンクタグ link_style  を作成、

その後 $('body').append(link_style);  でリンクタグを追加する

というような処理をしているだけです。

 

これだけでjQuery実行時に外部CSSを読み込ませることが可能です。

ですがこの例だとページ読み込み時にリンクさせてるのであんまり意味ないですね。

このコードが真価を発揮するのはボタンクリック時などイベント内で実行させたときなので、その実用的な例についてはまたあとで紹介

外部CSSを読み込みさせる(JavaScriptの場合)

jQueryを使わなくとも純粋なJavaScriptでも外部CSSの読み込みはできます。

やることはjQueryの場合とほとんど変わりません。

 

例えば次が先ほどのouter.css読み込みの例をJavaScriptのみで置き換えたコード例

初めに document.createElement('link');  で空のリンク要素を作成、

その後 setAttributeメソッド で属性を設定し、body要素に追加する

という処理をしています。

jQueryと比べると要素作成が少し面倒ですが、やっていることは全く同じです。

jQueryによる外部CSS読み込みの実用的な例

最後に少しだけ実用的(?)かもしれない例を紹介します。

紹介するのはボタンを押したときに動的に外部CSSを読み込む例です。

そのコード例は次の通り

 

まず次のようなボタン要素を作成

ボタン要素には load_css_btn  というIDを指定します。

 

そし次がボタンクリック時に外部CSSを読み込ませるコード例

先ほど紹介したテクニックとクリックイベントを組み合わせただけ

こういう風にイベントと組み合わせれば動的に外部CSSを読み込めて便利だと思います。

外部JSファイル・コードを読み込みさせるには・・・

ここまでで外部CSSを読み込ませるテクニックを紹介しました。

同じように外部JSファイルやJSコードもJavaScript内で読み込み・実行させることができます。

 

まず外部JSファイルを読み込む方法は次記事で解説した通り

外部CSSファイルを読み込む場合と似ていますが、やり方は少しだけ違います。

 

またJSコードそのものをJavaScript内で実行させることも可能です。

詳しい仕組みやコード例などは次記事でまとめた通り

こちらはJSコードを動的に実行しないといけない場合に役立つテクニックだと思います。

ここまでのまとめ

以上jQueryから外部CSSを読み込みさせるテクニックについてでした。

単純にリンクタグを作ってbody要素にねじこむだけです。

簡単なテクニックですが、動的にスタイルを追加するなどの場面で便利かもしれません。