jQuery应用与网页字体大小控制

 
 
     
         
         
         
         
            .msg{width:300px; height:auto; margin:0 auto; border:1px solid #000;} 
            .msg_caption{height:40px; line-height:40px; text-align:center; background:#999;} 
         
         
         
            $(function(){ 
                $("button").click(function(){ //为button绑定单击事件 
                    var thisEle=$("#para").css("font-size");//获取id为para元素的字体,获取到的是将返回数值和单位 
                    var textFontSize=parseInt(thisEle,10);//用parseInt方法去掉单位 
                    var unit=thisEle.slice(-2);//获取单位，slice()方法返回字符串中从指定的字符开始的一个子字符串，这里使用的质量单位是px,两个字符，所以从倒数第二个开始 
                    var cName=$(this).attr("class"); 
                    if(cName=="bigger"){//判断是bigger还是smaller，确定增量或减量 
                        if(textFontSize<=22){//判断最大字体，避免无限放大 
                            textFontSize+=2; 
                        } ; 
                    }else if(cName=="smaller"){ 
                        if(textFontSize>=12){//判断最小字体，避免无限缩小 
                            textFontSize-=2; 
                        };  
                    }; 
                    $("#para").css("font-size",textFontSize+unit);//再次获取para元素并为它的font-size属性赋予新的值，一定要拼接上单位 
                }) 
            }) 
         
     
     
         
             
                放大 
                缩小