需求说明
点击放大按钮时，当字体小于等于22px时候，每次字体增加2px
点击减小按钮时，当字体大于等于12px时候，每次字体减小2px
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>控制大小</title> </head> <body> <div class="msg"> <div class="msg_captin"> <span class="bigger">放大</span> <span class="smaller">缩小</span> </div> <div> <p id="para">一段可以调节字体大小的文本。一段可以调节字体大小的文本。一段可以调节字体大小的文本。一段可以调节字体大小的文本。</p > </div> </div> <script src="js/jquery-1.12.4.js" type="text/javascript"></script> <script> $(document).ready(function(){ $("span").click(function(){ var thisEle=$("#para").css("font-size"); var textFontSize=parseInt(thisEle,10); var unit=thisEle.slice(-2); var cName=$(this).attr("class"); if(cName=="bigger"){ if(textFontSize<=22){ textFontSize+=2; } }else if(cName=="smaller"){ if(textFontSize>=12){ textFontSize-=2; } } $("#para").css("font-size",textFontSize+unit); }); }); </script> </body> </html>