THE HAM MEDIA BLOG

jQuery自作:スタイルシートを切り替えるプラグイン

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
jquery
javascript
CSS

スタイルシートを切り替えるプラグインを作ってみた

先日jQueryの実験をして、
head部分にもアクセスできることがわかったので、
CSSを切り替えられるようなものを作ってみた。

部分的なCSSの変更であれば、
jQueryのCSSで変更するほうが簡単だけど、
たくさんの量のCSSを変更するような場合は
あらかじめCSSを書いておいて、
それに切り替えるようするほうが楽。

なので、簡易的に切り替えられるものを作ってみた。



スクリプト

今回作ってみたスクリプトはこんなもの↓

(function($){

$(function(){
	$.styleChanger();
});

$.styleChanger = function(settings){
	var c = $.extend({
   		cssSelector: '.style'
	}, settings);
	
	var cssHref = "";
	
	$(c.cssSelector).click(function(){
		$('link[href='+cssHref+']').remove();
		cssHref = $(this).attr('href');
		$("head").append('<link rel="stylesheet" href="'+ cssHref +'" type="text/css" />');
		return false;
	});
}
})(jQuery);

使い方

使い方は、適応させたいCSSをaのhref中にセットしておき、
そのaのclassをstyleとしておく。

HTML例

<a href="css/change01.css" class="style">スタイル1</a>
これだけで、クリックしたらそのCSSが適応されるようになる。

デモ

今回のは「スタイル○」をクリックすると、
CSSが適応されて、下の「スタイル」と書かれた部分に
読み込んだCSSが適応されるようになっています。

適応されるCSSのURLも出るように作ってみました。

スタイル1 スタイル2 スタイル3 なし

適応CSS:

スタイル

ちなみに、適応されるCSSは以下の通りになっています。

■ スタイル1

#change{
	font-size:400%;
	color:#ff5500;
}

■ スタイル2

#change{
	font-size:300%;
	color:#ff0000;
	font-weight:bold;
}

■ スタイル3

#change{
	font-size:200%;
	color:#0000ff;
}

上のはあくまで例です。
各自変更させたいCSSを作っておくようにしてください。

このプラグインの今後

ものすごく簡易的に作ってみただけなので、
いろいろ不都合も生じてくると思うので、
今後機能を追加していったりしてみようと思う。



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。