目次

,

ここは旧トップページ＞日曜プログラミング

外部CSSを任意のタイミングで読み込むJavaScript

外部CSSを使う場合、DokuWikiなど一部CMSはページごとhead要素を変更できないため全部のページでCSSロードしなければなりませんが、この方法を使えばBody要素内の任意の場所でCSSで読み込みを開始できます。

任意のタイミングで使えるのでSEOで表示速度を上げたい時など余分なCSSを後から読みこませる場合や、onClickイベントなどと連動させてPCやスマホ用のCSS切替、タイマーイベントなどでアニメーションにも利用できると思います。

PR

関数本体

HTML内に1つだけ設置します。head要素内でもbody要素内のどちらでも設置できます。 

<script>
  function cssLoad(cssFile){
    if(document.all){
      document.createStyleSheet(cssFile);
    }else{
      var link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = cssFile;
      link.type = "text/css"
      document.getElementsByTagName('head')[0].appendChild(link);
    }
  }
</script>

呼び出し部分

関数本体より後に書きCSSをロードしたいタイミングで cssLoad(CSSファイル名); で読み込み始めます。複数ある場合は cssLoad(); を複数記述します。 

<script>
  cssLoad("../blog/test.css");
</script>

ここは旧トップページ＞日曜プログラミング