jQuery控制网页字体大小

<div class="msg">
    <div class="msg_caption">
        <button type="button" class="bigger">放大</button>
        <button type="button" class="smaller">缩小</button>
    </div>
    <div>
        <p class="para" >
            “On an evening in the latter part of May a middle-aged man 
            was walking homeward from Shaston to the village of Marlott, 
            in the adjoining Vale of Blakemore, or Blackmoor. 
            The pair of legs that carried him were rickety, 
            and there was a bias in his gait which inclined him 
            somewhat to the left of a straight line. 
            He occasionally gave a smart nod, 
            as if in confirmation of some opinion, 
            though he was not thinking of anything in particular. 
            An empty egg-basket was slung upon his arm, 
            the nap of his hat was ruffled, 
            a patch being quite worn away at its brim 
            where his thumb came in taking it off. 
            Presently he was met by an elderly parson astride on a gray mare, 
            who, as he rode, hummed a wandering tune.”
        </p>
    </div>
</div>
<script>
    $(function(){
        $("button").click(function(){
            var fontSize = $(".para").css("font-size");  //获取字体大小
            var textFontSize = parseInt(fontSize);  //去掉单位
            var unit = fontSize.slice(-2);  //获取单位
            var btn = $(this).attr("class"); //获取button的属性值
            if(btn == "bigger"){
                if(textFontSize <= 30){  //判断最大字体
                    textFontSize += 2;
                }
            } else if(btn == "smaller"){
                if(textFontSize >= 14){  //判断最小字体
                    textFontSize -= 2;
                }
            }
            $(".para").css("font-size",textFontSize + unit);
        });
    })
</script>