- <!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>