jQueryでCSSファイルを読み込んでheadに追加する方法

2019-06-18jQuery

jQueryを利用して動的にCSSファイルを読み込んでheadに追加する方法です。

他にも色々と方法はありますが、ぱっと見わかりやすいコードをひとつ紹介しておきます。

jQueryでCSSファイルを読み込んでheadに追加する方法

$.get()で読み込んだCSSファイルの中身を#add-cssを指定したhead内のstyleタグの中に挿入する方法です。

HTML(<head>内に)

<style type="text/css" id="add-css"></stle>

jQuery

$.get("CSSファイルのURL", function(data){
  $('#add-css').html(data);
});

注意点としては、逆にCSSの適用を解除するのにスクリプトで#add-cssの中身を削除しても、反映したCSSは解除されない事にあります。

もし、CSSの適用を解除するのであれは個別にstyleで戻していくか、一括でリセット用のCSSなどを用意する必要があります。

2019-06-18jQuery

Posted by Yousuke.U