THE HAM MEDIA BLOG

先日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">スタイル１</a>

これだけで、クリックしたらそのCSSが適応されるようになる。

デモ

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

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

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

■ スタイル１

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

■ スタイル２

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

■ スタイル３

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

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

このプラグインの今後

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