ページのフォントサイズの拡大/縮小ボタン

Result

jQuery

$(document).ready(function () {
 
    var min=9;  //最小サイズ
    var max=16; //最大サイズ
    var reset = $('p').css('fontSize');//デフォルト値を取得 
    var elm = $('p.intro, p.ending');  //適応箇所
    var size = str_replace(reset, 'px', '');  //デフォルト値を設定
    
    //クリックでサイズを大きく
    $('a.plus').click(function() {
        if (size<=max) {//最大サイズになったら止める
            size++;//サイズを増やす
            elm.css({'fontSize' : size});//フォントサイズをセットする
        }
        return false;   
    });
    //クリックでサイズを小さく
    $('a.minus').click(function() {
        if (size>=min) {//最小サイズになったら止める
            size--;//サイズを減らす            
            elm.css({'fontSize' : size});//フォントサイズをセットする
        }
        return false;   
    });
     
    //リセットさせる
    $('a.reset').click(function () {
        //設定したデフォルト値を取得
         elm.css({'fontSize' : reset});     
    });
});
 
//文字列を置換する
function str_replace(haystack, needle, replacement) {
    var temp = haystack.split(needle);
    return temp.join(replacement);
}

css

body {
    font-size:14px; 
    font-family:arial;
}
a {
    color:#c00; 
    text-decoration:none;
}
 
a:hover {
    color:#f00; 
    text-decoration:underline;
}
p{
    width:500px;
    margin-bottom:25px;
}

html

<a href="javascript:void(0);" class="plus">A+</a> | 
<a href="javascript:void(0);" class="reset">Reset</a> | 
<a href="javascript:void(0);" class="minus">A-</a>

<p class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="ending">Sed gravida sapien nec erat posuere bibendum a ac neque.</p>

via

Quick and Easy jQuery Font Resizer Tutorial | Queness