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

发布时间：2020-10-15 18:33:57 作者：lflianglan
来源：网络阅读：491
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/> 
        <meta name="keywords" content="关键词1，关键词2，关键词3等等"/> 
        <title>网页字体大小</title> 
        <style type="text/css"> 
            .msg{width:300px; height:auto; margin:0 auto; border:1px solid #000;} 
            .msg_caption{height:40px; line-height:40px; text-align:center; background:#999;} 
        </style> 
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
        <script type="text/javascript"> 
            $(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属性赋予新的值，一定要拼接上单位 
                }) 
            }) 
        </script> 
    </head> 
    <body> 
        <div class="msg"> 
            <div class="msg_caption"> 
                <button class="bigger">放大</button> 
                <button class="smaller">缩小</button> 
            </div> 
            <div id="para"> 
                jQuery应用与网页字体大小的控制。 
                jQuery应用与网页字体大小的控制。 
                jQuery应用与网页字体大小的控制。 
                jQuery应用与网页字体大小的控制。 
                jQuery应用与网页字体大小的控制。 
                jQuery应用与网页字体大小的控制。 
                jQuery应用与网页字体大小的控制。 
            </div> 
        </div> 
    </body> 
</html>
jQuery应用与网页字体大小控制

相关阅读
