skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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>

※簡易的なものなので、ページをまたいで維持はできません。
jQueryでフォントサイズを簡易的に切り替える　via：jQuery Font Resize Demoサンプル

記事作成：2009年10月01日

前の記事：スライドの切り替えが印象的なjQueryの画像ギャラリー「Sliced Image Slider」
次の記事：jQueryでフォームの値がない場所を揺らす　via：Animate validation feedback using jQuery