网站建设资讯

NEWS

网站建设资讯

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

  1.  
  2.  
  3.      
  4.          
  5.          
  6.         网页字体大小 
  7.          
  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.          
  11.          
  12.          
  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.          
  32.      
  33.      
  34.          
  35.              
  36.                 放大 
  37.                 缩小 
  38.             
 
  •              
  •                 jQuery应用与网页字体大小的控制。 
  •                 jQuery应用与网页字体大小的控制。 
  •                 jQuery应用与网页字体大小的控制。 
  •                 jQuery应用与网页字体大小的控制。 
  •                 jQuery应用与网页字体大小的控制。 
  •                 jQuery应用与网页字体大小的控制。 
  •                 jQuery应用与网页字体大小的控制。 
  •             
  •  
  •         
  •  
  •      
  •  
  •  

    创新互联建站是少有的成都网站设计、做网站、营销型企业网站、微信小程序、手机APP,开发、制作、设计、卖友情链接、推广优化一站式服务网络公司,成立与2013年,坚持透明化,价格低,无套路经营理念。让网页惊喜每一位访客多年来深受用户好评


    当前文章:jQuery应用与网页字体大小控制
    标题来源:http://njwzjz.com/article/gosijp.html

    其他资讯