jQuery之字型大小的設定方法

來源:互聯網
上載者:User

jQuery之字型大小的設定方法

 本篇文章主要是對jQuery 字型大小的設定方法進行了介紹,需要的朋友可以過來參考下,希望對大家有所協助

先擷取字型大小,進行處理。

 

再將修改的值儲存。

 

slice() 方法可從已有的數組中返回選定的元素。

arrayObject.slice(start,end)。

start 必需。規定從何處開始選取。如果是負數,那麼它規定從數組尾部開始算起的位置。也就是說,-1 指最後一個元素,-2 指倒數第二個元素,以此類推。

 

end   可選。規定從何處結束選取。該參數是數組片斷結束處的數組下標。如果沒有指定該參數,那麼切分的數組包含從 start 到數組結束的所有元素。如果這個參數是負數,那麼它規定的是從數組尾部開始算起的元素。

 

jQuery代碼如下:

 

 代碼如下:

<script type="text/javascript">

    $(function(){

        $("span").click(function(){

            //擷取para的字型大小

            var thisEle = $("#para").css("font-size"); 

            //parseFloat的第二個參數表示轉化的進位,10就表示轉為10進位

            var textFontSize = parseFloat(thisEle , 10);

            //javascript內建方法

            var unit = thisEle.slice(-2); //擷取單位

            var cName = $(this).attr("class");

            if(cName == "bigger"){

                    textFontSize += 2;

            }else if(cName == "smaller"){

                    textFontSize -= 2;

            }

            //設定para的字型大小

            $("#para").css("font-size",  textFontSize + unit );

        });

    });

  </script>

 

html代碼如下:

代碼如下:

<body>

 

<div class="msg">

    <div class="msg_caption">

        <span class="bigger" >放大</span>

        <span class="smaller" >縮小</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.

        </p>

    </div>

</div>

 

</body>

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.