この文書の現在のバージョンと選択したバージョンの差分を表示します。
— |
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]] |