忍者ブログ

Home > > 外部cssを動的に読み込む方法

[PR]

  • 2017-10-18

Share on Tumblr このエントリーをはてなブックマークに追加

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Comments:

Trackback+Pingback:

Listed below are links to weblogs that reference
[PR] from Born Neet

Home > > 外部cssを動的に読み込む方法

Home > JavaScript > 外部cssを動的に読み込む方法

外部cssを動的に読み込む方法

Share on Tumblr このエントリーをはてなブックマークに追加

前回のエントリでいろいろ勉強になったことを書いたけど、これもdot(w).jsの副産物。

その名もloadCss.js
使ってみたい人はどうぞご自由に。

サンプルや説明は続きにて。

ソースはたったこんだけ。

function loadCss(href, check) {

	if(typeof(check) == 'undefined') check = true;

	var head = document.getElementsByTagName('head')[0];
	var link = document.createElement('link');
	link.rel = 'stylesheet';
	link.type = 'text/css';
	link.href = href;

	if(check) {
		var links = head.getElementsByTagName('link');
		for(var i = 0; i < links.length; i++) {
			if(links[i].href == link.href) return false;
		}
	}

	head.appendChild(link);
}

一応簡単な重複ロード確認機能もつけてみた。(style要素内でimportされているものはチェックできません;)

link.relとかじゃなくsetAttributeを使った方がいいのかなぁ・・・
まぁいいか、動いてるし!

<script type="text/javascript" src="loadCss.js"></script>
<script type="text/javascript">
	loadCss('cssファイル');
</script>

とか書けば任意のcssがその場で追加される。

例えばブログなら、テンプレートでloadCss.jsを読んでおいて、個別のエントリに必要なcssを記事内でロードするっていう使い方ができる。

僕みたいにブログでJavaScriptのサンプルを書いてる場合は便利かも。
(cssのサンプルもブログ内で簡単に紹介できるようになる…需要があるかは知らないけど。)

↓がサンプル。testをクリックすると、読み込んだ外部cssによって、リンクの背景が赤くなります。(1回限り)

test

動作確認:IE6/FF2


[参考記事]

Core JavaScript 1.5 Guide:The Employee Example:More Flexible Constructors - MDC
404 Blog Not Found:javascript - ふつうのnamespace
typeof(引数) == 'undefined'な書き方を参考に。


※ちなみに、一昨日もチラッと触れましたが、

<style type="text/css">@import "cssファイル";</style>
<link rel="stylesheet" type="text/css" href="cssファイル" />

とかをbody内に書いても手元の環境では普通に動きました。

上のようなjs使うの面倒、かつ標準とか気にしないという人は…(決しておすすめはできませんが。)

PR

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
Listed below are links to weblogs that reference
外部cssを動的に読み込む方法 from Born Neet

Home > JavaScript > 外部cssを動的に読み込む方法

Search
Loading
Feeds
Links
スポンサードリンク
Ad
デル株式会社
Ad

Page Top