jQuery学习笔记3--网页字体变大变小

效果图：

 

js代码

  <script type="text/javaScript">
        $(function(){
            $(".msg_caption span").click(function(){  //当文档加载完毕后，为所有的<span>元素绑定单击事件
                var thisEle = $("#para").css("font-size"); //获取ID为“para”元素的大小
                var textFontSize = parseFloat(thisEle , 10);//或许返回值用parseFloat（）方法去掉单位，第二个值表示10进制
                var unit =thisEle.slice(-2); //或许单位 ， slice指定字符串应该从倒数第2个字符开始。
                var cName =$(this).attr("class"); //获取当前的class
                if(cName == "bigger fl") { //if语句判断当前被点击的<span>元素的Class是否为 boigger
                    textFontSize += 2; //是的话字体变量增加2px
                }else{
                  textFontSize -= 2; //字体变量减少2px
                }
              $("#para").css("font-size" , textFontSize + unit ); //再次获取para的字体值并且带上单位
            });
            
            
        });
    </script>

 

 

HTML代码

<div class="msg">
    <div class="msg_caption">
        <span class="bigger fl">放大</span>
        <span class="smaller fl ">缩小</span>
    </div>
    <div>
        <p id="para">
            This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.
        </p>
    </div>
</div>

 

    <style type="text/css">
    a{ text-decoration: none; coor: #000;}
    .fl{ float:left;}
    .fr{ float:right;}
    .msg { width: 500px; border: 1px solid #ccc;}
    .msg_caption { width: 500px; overflow: hidden;}
    .msg_caption span { display: block; width: 50px; height: 20px; line-height: 20px; background: #666; color: #fff; text-align: center; margin-right: 20px; font-size: 12px; cursor: pointer;}
    
    </style>