P-利-Q

没有做不到,只有想不到!

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

网页常常有对字体放大缩小的需求,我们不妨来看一下下面这段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);
    });
});

 

posted on 2013-12-08 21:18  P-利-Q  阅读(1197)  评论(0编辑  收藏  举报