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

最新推荐文章于 2024-08-29 10:38:50 发布

weixin_30675247

最新推荐文章于 2024-08-29 10:38:50 发布

阅读量604

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/learnit/archive/2012/06/06/2538220.html

本文将指导您如何利用jQuery技术实现网页段落字体大小的动态切换，包括制作HTML页面、编写JavaScript代码以及解释关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

1.制作网页页面

 1 <!doctype html>
 2   <html lang="en">
 3   　　<head>
 4   　　　　<meta charset="UTF-8"/>
 5   　　　　<title>jQuery training</title>
 6   　　</head>
 7   　　<body>
 8   　　　　Font Size:<a href="#" id="smaller">Smaller</a><a href="#" id="bigger">Bigger</a><br/>
 9          <p>This is a Paragraph.</p>
10   　　　　<script type="text/javascript" src="js/jQuery.js"></script> 
11   　　　　<script type="text/javascript" src="js/ext.js"></script>
12   　　</body>
13   </html>

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

 1 function change_size(element,size){
 2     var current = parseInt(element.css('font-size'));
 3     //alert(current);
 4     if(size == "smaller"){
 5         var newSize = current - 2;
 6     }else if(size == "bigger"){
 7         var newSize = current + 2;
 8     }    
 9     element.css('font-size',newSize+'px');
10 }
11 
12 $("#smaller").click(function(){
13     change_size($("p"),"smaller");    
14 });
15 $("#bigger").click(function(){
16     change_size($("p"),"bigger");    
17 });

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

转载于:https://www.cnblogs.com/learnit/archive/2012/06/06/2538220.html