需求說明
點擊放大按鈕時，當字體小於等於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>