jQuery | CSSファイルを読み込んでheadに追加する方法
jQueryを利用して動的にCSSファイルを読み込んでheadに追加する方法です。
他にも色々と方法はありますが、ぱっと見わかりやすいコードをひとつ紹介しておきます。
jQueryでCSSファイルを読み込んでheadに追加する方法
$.get()で読み込んだCSSファイルの中身を#add-cssを指定したhead内のstyleタグの中に挿入する方法です。
<head>内に以下のHTMLを追加しておきます。
<style type="text/css" id="add-css"></stle>CSSを追加するjQueryコードは以下のようになります。
$.get("CSSファイルのURL", function (data) {
$('#add-css').html(data);
})注意点としては、逆にCSSの適用を解除するのにスクリプトで#add-cssの中身を削除しても、反映したCSSは解除されない事にあります。
もし、CSSの適用を解除するのであれは個別にstyleで戻していくか、一括でリセット用のCSSなどを用意する必要があります。