jQuery实现设置字体大小代码实例

jQuery实现设置字体大小代码实例:
设置网页中字体的大小是常见的操作，下面就通过代码实例介绍一下如何实现此功能。
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
.bigger,.smaller{ 
  cursor:pointer 
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
  $("span").click(function(){
    var thisEle=$("#para").css("font-size"); 
    var textFontSize=parseFloat(thisEle,10);
    var unit=thisEle.slice(-2);
    var cName=$(this).attr("class");
    if(cName=="bigger"){
      textFontSize+= 2;
    }
    else if(cName=="smaller"){
      textFontSize-=2;
    }
    $("#para").css("font-size", textFontSize+unit);
  });
});
</script>
</head>
<body>
<div class="msg">
  <div class="msg_caption"> 
    <span class="bigger" >放大</span> 
    <span class="smaller" >缩小</span> 
  </div>
  <div><p id="para">蚂蚁部落</p></div>
</div>
</body>
</html>

以上代码实现了我们的要求，可以实现文本内容的放大和缩小效果，下面介绍一下它的实现过程。
一.代码注释:
1.$(function(){})，当文本结构完全加载完毕之后再去执行函数中的代码。
2.$("span").click(function(){})，为span元素注册click事件处理函数。
3.var thisEle=$("#para").css("font-size")，获取id属性值为para元素下文本字体的大小。
4.var textFontSize=parseFloat(thisEle,10)，将字体大小转换成数值类型。
5.var unit=thisEle.slice(-2)，截取字符串，也就是截取最后两位，也就是单位(px)。
6.var cName=$(this).attr("class")，获取当前点击span元素的class属性值。
7.if(cName=="bigger"){textFontSize+= 2;}，如果点击是放大按钮就将字体放大。
8.$("#para").css("font-size", textFontSize+unit)，设置字体大小。
二.相关阅读:
1.click事件可以参阅jQuery的click事件一章节。
2.css()函数可以参阅jQuery的css()方法一章节。
3.parseFloat()函数可以参阅javascript的parseFloat()方法一章节。
4.slice()函数可以参阅javascript的String对象的slice()方法一章节。
5.attr()函数可以参阅jQuery的attr()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12398

更多内容可以参阅:http://www.softwhy.com/jquery/

爱程序网

Tags：[db:关键字]