zoukankan      html  css  js  c++  java
  • 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 { 500px; border: 1px solid #ccc;}
        .msg_caption { 500px; overflow: hidden;}
        .msg_caption span { display: block; 50px; height: 20px; line-height: 20px; background: #666; color: #fff; text-align: center; margin-right: 20px; font-size: 12px; cursor: pointer;}
        
        </style>

  • 相关阅读:
    ​DBEngines 11月数据库排名:PostgreSQL坐稳同期涨幅榜冠军宝座
    深入了解 BTree 和 B+Tree 的区别
    exec详解
    javascript之property's attributes
    极客公园之李彦宏讲话要点
    C++之auto_ptr
    javascript之属性状态控制Method
    ARM寄存器简介
    linux之fcntl
    http之100continue
  • 原文地址:https://www.cnblogs.com/qdmaomao/p/4549033.html
Copyright © 2011-2022 走看看