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

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

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

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

このページの目次

外部CSSを読み込みさせる（jQueryの場合）
外部CSSを読み込みさせる（JavaScriptの場合）
jQueryによる外部CSS読み込みの実用的な例
外部JSファイル・コードを読み込みさせるには・・・
ここまでのまとめ

外部CSSを読み込みさせる（jQueryの場合）

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

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

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

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

.bold_italic{
  font-weight: bold;
  font-style: italic;
}

.bold_italic{

font-weight: bold;

font-style: italic;

}

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

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

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

jQuery(function(){
  var link_style = $('<link>').attr({
    'rel': 'stylesheet',
    'href': 'outer.css'
  });
  $('body').append(link_style);
});

jQuery(function(){

var link_style = $('<link>').attr({

'rel': 'stylesheet',

'href': 'outer.css'

});

$('body').append(link_style);

});

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

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

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

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

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

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

外部CSSを読み込みさせる（JavaScriptの場合）

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

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

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

window.onload = function(){
  var link_style = document.createElement('link');
  link_style.setAttribute('rel', 'stylesheet');
  link_style.setAttribute('href', 'outer.css');
  document.body.appendChild(link_style);
};

window.onload = function(){

var link_style = document.createElement('link');

link_style.setAttribute('rel', 'stylesheet');

link_style.setAttribute('href', 'outer.css');

document.body.appendChild(link_style);

};

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

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

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

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

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

最後に少しだけ実用的（？）かもしれない例を紹介します。

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

そのコード例は次の通り

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

<button id="load_css_btn">外部CSSを読み込み</button>

1	<button id="load_css_btn">外部CSSを読み込み</button>

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

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

jQuery(function(){
  jQuery('#load_css_btn').on('click', function(){
    var link_style = $('<link>').attr({
      'rel': 'stylesheet',
      'href': 'outer.css'
    });
    $('body').append(link_style);
  });
});