JQuery实现最字体的放大缩小

网页常常有对字体放大缩小的需求,我们不妨来看一下下面这段JQuery代码的实现。

假如在html页面代码中我们有这么一段代码:

<p>啦啦啦啦啦啦啦啦啦啦</p>

那么JQuery的实现如下

$(document).ready(function () {
    var fontSize = $("p").css("font-size");
    //取得当前字体大小
    var fontSizeNumber = parseFloat(fontSize , 10);
   //取得单位
    var unit = size.slice(-2);
    //放大字体,bigFontSize为按钮id
    $("#bigFontSize").click(function () {
        fontSizeNumber += 2;
        $("p").css("font-size", fontSizeNumber + unit);
    });
    //减小字体,smallFontSize为按钮id
    $("#smallFontSize").click(function () {
        fontSizeNumber -= 2;
        $("p").css("font-size", fontSizeNumber + unit);
    });
});