jQueryを使用してフォントサイズを切り替える方法

最近のWEBサイトでは、よくフォントサイズの切り替えを行うスクリプトがありますが、あれをjQueryだけで実装するエントリーHow to increase and decrease the font-size of content present in a div container using jQueryのご紹介。

よくCSSを切り替えるタイプのがありましたが、あれだとCSSを複数用意しなければいけないためフォントサイズだけ切り替えるには少し大仰でした。

以下のようなコードで自由にフォントサイズの範囲を設定することが可能になっています。

<script>
//最小フォントサイズ
var minValue=13;

//最大フォントサイズ
var maxValue=16;

$(document).ready(function(){
        //フォントサイズを制御したい要素をここで指定する
	var ChildElements=$('.font_size_change_container *');

    //クリックでフォントサイズを大きくする要素を指定
    $("#inc_font").click(function(){
		var fontSizeNew=parseInt(($('.font_size_change_container *').css("font-size")).replace(/px/,""));
		if(fontSizeNew!=maxValue){fontSizeNew += 1;}
		ChildElements.css("font-size",fontSizeNew+"px");
    });

    //クリックでフォントサイズを小さくする要素を指定
    $("#dec_font").click(function(){
		var fontSizeNew=parseInt(($('.font_size_change_container *').css("font-size")).replace(/px/,""));
		if(fontSizeNew!=minValue){fontSizeNew -= 1;}
		ChildElements.css("font-size",fontSizeNew+"px");
    });
});
</script>

元記事にはデモがあるので実際の動作を確認する事が可能になっています。
jQuery単体でこんなに簡単に実装できたんですね。いつか使うかもしれないのでメモ。