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

2020-12-13 01:50

阅读：387

标签：style blog class code java tar

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

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

1.制作网页页面index.html，页面代码如下：

doctype html>
  html lang="en">
  　　head>
  　　　　meta charset="UTF-8"/>
  　　　　title>jQuery trainingtitle>
  　　head>
  　　body>
  　　　　Font Size:a href="#" id="smaller">Smallera>a href="#" id="bigger">Biggera>br/>
         p>This is a Paragraph.p>
  　　　　script type="text/javascript" src="js/jQuery.js">script> 
  　　　　script type="text/javascript" src="js/ext.js">script>
  　　body>
  html>

2.编写js目录下的ext.js文件内容，内容如下：

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");    
});

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

jQuery之实现页面字体变大、变小,搜素材,soscw.com

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

标签：style blog class code java tar

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

上一篇：JavaScript If..else

下一篇：SpringBoot集成JWT实现token验证

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：jQuery之实现页面字体变大、变小
文章链接：http://soscw.com/essay/24297.html

亲，登录后才可以留言！

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

评论

热门文章

推荐文章

最新文章

置顶文章