码迷,mamicode.com
首页 > Web开发 > 详细

jQuery之实现页面字体变大、变小

时间:2014-05-07 01:56:48      阅读:306      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   tar   

转载请标明,http://www.gxabase.com

jQuery之实现字体变大、变小,这在我们做网页的时候经常会使用的功能,以下为实现过程:

1.制作网页页面index.html,页面代码如下:

bubuko.com,布布扣
<!doctype html>
  <html lang="en">
    <head>
      <meta charset="UTF-8"/>
      <title>jQuery training</title>
    </head>
    <body>
      <p>Font Size:<a href="#" id="smaller">Smaller</a><a href="#" id="bigger">Bigger</a><br/></p>
         <p>This is a Paragraph.</p>
      <script type="text/javascript" src="js/jQuery.js"></script> <!--在http://www.jquery.org网站中下载jquery_xxx.js文件并导入此页面-->
      <script type="text/javascript" src="js/ext.js"></script><!--自定义的js文件-->
    </body>
  </html>
bubuko.com,布布扣

2.编写js目录下的ext.js文件内容,内容如下:

 

bubuko.com,布布扣
function change_size(element,size){
    var current = parseInt(element.css(‘font-size‘));
    //alert(current);
    if(size == "smaller"){
        var newSize = current - 2;
    }else if(size == "bigger"){
        var newSize = current + 2;
    }    
    element.css(‘font-size‘,newSize+‘px‘);
}

$("#smaller").click(function(){
    change_size($("p"),"smaller");    
});
$("#bigger").click(function(){
    change_size($("p"),"bigger");    
});
bubuko.com,布布扣

 

经过以上两步就可以实现改变段落字体大小的功能。

 

jQuery之实现页面字体变大、变小,布布扣,bubuko.com

jQuery之实现页面字体变大、变小

标签:style   blog   class   code   java   tar   

原文地址:http://www.cnblogs.com/cdgxa/p/3712187.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!