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

2019年4月8日jQuery

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

他にも色々と方法はありますが、ぱっと見わかりやすいコードでひとつ

HTML（<head>内）

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

jQuery

<script type="text/javascript">
$.get("CSSファイルのURL", function(data){
  $('#add-css').html(data);
});
</script>

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

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

もし、CSSの適用を解除するのであれはreset.cssなどを用意します

2019年4月8日jQuery

Posted by ヨウスケ