あちあち情報局

趣味や日曜プログラムなどを書いています

ユーザ用ツール

サイト用ツール


js_cssload

差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

この比較画面にリンクする

js_cssload [2018/05/14 21:25] (現在)
管理者 作成
ライン 1: ライン 1:
 +{{tag>​プログラミング関連 Javascript}}
 +[[start]]>[[programming_start]]
  
 +====== 外部CSSを任意のタイミングで読み込むJavaScript ======
 +外部CSSを使う場合、DokuWikiなど一部CMSはページごとhead要素を変更できないため全部のページでCSSロードしなければなりませんが、この方法を使えばBody要素内の任意の場所でCSSで読み込みを開始できます。
 +
 +任意のタイミングで使えるのでSEOで表示速度を上げたい時など余分なCSSを後から読みこませる場合や、onClickイベントなどと連動させてPCやスマホ用のCSS切替、タイマーイベントなどでアニメーションにも利用できると思います。
 +
 +----
 +
 +===== PR =====
 +<​html>​
 +<script async src="//​pagead2.googlesyndication.com/​pagead/​js/​adsbygoogle.js"></​script>​
 +<!-- respon_0 -->
 +<ins class="​adsbygoogle"​
 +     ​style="​display:​block"​
 +     ​data-ad-client="​ca-pub-9251612436023685"​
 +     ​data-ad-slot="​1409739163"​
 +     ​data-ad-format="​auto"></​ins>​
 +<​script>​
 +(adsbygoogle = window.adsbygoogle || []).push({});​
 +</​script>​
 +</​html>​
 +
 +
 +===== 関数本体 =====
 +HTML内に1つだけ設置します。head要素内でもbody要素内のどちらでも設置できます。
 +
 +<code javascript>​
 +<​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>​
 +</​code>​
 +
 +===== 呼び出し部分 =====
 +関数本体より後に書きCSSをロードしたいタイミングで ''​cssLoad(CSSファイル名);''​ で読み込み始めます。複数ある場合は ''​cssLoad();''​ を複数記述します。 ​
 +
 +<code javascript>​
 +<​script>​
 +  cssLoad("​../​blog/​test.css"​);​
 +</​script>​
 +</​code>​
 +
 +----
 +[[start]]>[[programming_start]]
js_cssload.txt · 最終更新: 2018/05/14 21:25 by 管理者