内容へ移動
あちあち情報局
趣味や日曜プログラムなどを書いています
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
トップページ
»
外部CSSを任意のタイミングで読み込むJavaScript
js_cssload
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
{{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
管理者
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ