jQueryでフォントサイズを簡易的に切り替える　via：jQuery Font Resize Demo

フォントサイズを切り替えるのは意外に面倒です。
そこで、jQueryを使用して簡易的に切り替える方法を紹介します。
via：jQuery Font Resize Demo

使用方法

jQueryからjquery.jsをダウンロードします。

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var originalFontSize = $('html').css('font-size'); //初期のフォントサイズ
  $(".resetFont").click(function(){ //.resetFontをクリックしたときに
  $('html').css('font-size', originalFontSize); //フォントサイズを戻す
  });

  $(".increaseFont").click(function(){ //.increaseFontをクリックしたとき
  	var currentFontSize = $('html').css('font-size'); //現在のフォントサイズ
 	var currentFontSizeNum = parseFloat(currentFontSize, 10); 
    var newFontSize = currentFontSizeNum*1.2; //フォントサイズを1.2倍する
	$('html').css('font-size', newFontSize); //大きくしたフォントサイズを適用
	return false;
  });

  $(".decreaseFont").click(function(){ //.decreaseFontをクリックしたとき
  	var currentFontSize = $('html').css('font-size'); //現在のフォントサイズ
 	var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8; //フォントサイズを0.8倍する
	$('html').css('font-size', newFontSize); //小さくしたフォントサイズを適用
	return false;
  });
});
</script>
あとは上記で指定したクラスを記述すれば完成です。

<a href="#" class="increaseFont">大</a>
<a href="#" class="decreaseFont">小</a>
<a href="#" class="resetFont">リセット</a>
※簡易的なものなので、ページをまたいで維持はできません。

サンプル

大　 小　 リセット
Javascriptサンプルページ一覧
skuare.net