jQuery应用与网页字体大小控制
更新:HHH   时间:2023-1-7


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html> 
  3.     <head> 
  4.         <meta http-equiv="content-type" content="text/html;charset=utf-8"/> 
  5.         <meta name="keywords" content="关键词1,关键词2,关键词3等等"/> 
  6.         <title>网页字体大小</title> 
  7.         <style type="text/css"> 
  8.             .msg{width:300px; height:auto; margin:0 auto; border:1px solid #000;} 
  9.             .msg_caption{height:40px; line-height:40px; text-align:center; background:#999;} 
  10.         </style> 
  11.         <script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
  12.         <script type="text/javascript"> 
  13.             $(function(){ 
  14.                 $("button").click(function(){ //为button绑定单击事件 
  15.                     var thisEle=$("#para").css("font-size");//获取id为para元素的字体,获取到的是将返回数值和单位 
  16.                     var textFontSize=parseInt(thisEle,10);//用parseInt方法去掉单位 
  17.                     var unit=thisEle.slice(-2);//获取单位,slice()方法返回字符串中从指定的字符开始的一个子字符串,这里使用的质量单位是px,两个字符,所以从倒数第二个开始 
  18.                     var cName=$(this).attr("class"); 
  19.                     if(cName=="bigger"){//判断是bigger还是smaller,确定增量或减量 
  20.                         if(textFontSize<=22){//判断最大字体,避免无限放大 
  21.                             textFontSize+=2; 
  22.                         } ; 
  23.                     }else if(cName=="smaller"){ 
  24.                         if(textFontSize>=12){//判断最小字体,避免无限缩小 
  25.                             textFontSize-=2
  26.                         };  
  27.                     }; 
  28.                     $("#para").css("font-size",textFontSize+unit);//再次获取para元素并为它的font-size属性赋予新的值,一定要拼接上单位 
  29.                 }) 
  30.             }) 
  31.         </script> 
  32.     </head> 
  33.     <body> 
  34.         <div class="msg"> 
  35.             <div class="msg_caption"> 
  36.                 <button class="bigger">放大</button> 
  37.                 <button class="smaller">缩小</button> 
  38.             </div> 
  39.             <div id="para"> 
  40.                 jQuery应用与网页字体大小的控制。 
  41.                 jQuery应用与网页字体大小的控制。 
  42.                 jQuery应用与网页字体大小的控制。 
  43.                 jQuery应用与网页字体大小的控制。 
  44.                 jQuery应用与网页字体大小的控制。 
  45.                 jQuery应用与网页字体大小的控制。 
  46.                 jQuery应用与网页字体大小的控制。 
  47.             </div> 
  48.         </div> 
  49.     </body> 
  50. </html> 

 

返回web开发教程...