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