JavaScript實現(xiàn)點擊按鈕字體放大-縮小

    本文給大家分享js實現(xiàn)點擊按鈕字體放大縮小實例代碼，代碼簡單易懂，需要的朋友參考下吧
    具體代碼如下所示：
    <style>
    .bb{color:red;}
    .cc{color:green;}
    .chapter {font-size: 1.5em;}
    .normal{font-size:12px;}
    .hidden{display:none;}
    </style>
    <script>
    $(document).ready(function() {
    $('div.aa').addClass('bb');
    $('a[href^="http:"]').addClass('cc');
    //$('#switcher-large').on('click',function(){
    // $('div.large').addClass('chapter'); 
    //});
    $('#switcher-large').click(function(){ 
    $('div.large').toggleClass('chapter');
    $(this).toggleClass('bb'); 
    });
    //$('#switcher').click(function(){//點擊按鈕增加（移除）樣式（toggleClass方法）
    //$('#switcher button').toggleClass('hidden');
    //})
    //字體的放大縮小
    var $biger = $('div.large');
    var num = parseFloat($biger.css('fontSize')); 
    $('#switcher-bigger').click(function(){ 
    num=num*1.4;
    $biger.css('fontSize',num+'px');
    });
    $('#switcher-small').click(function(){
    num=num/1.4;
    $biger.css('fontSize',num+'px');
    });
    });
    </script>
    <div id="switcher">
    <h3>Style Switcher</h3>
    <button id="switcher-default"> Default </button>
    <button id="switcher-hidden">Narrow hidden</button>
    <button id="switcher-large">Large Print</button>
    <button id="switcher-bigger">switcher-bigger</button>
    <button id="switcher-small">switcher-small</button>
    </div>
    <div>
    <p>....</p>
    <p>....</p>
    <p>....</p>
    <p>....</p>
    </div>
    關于JavaScript實現(xiàn)點擊按鈕字體放大、縮小的相關知識就給大家介紹這么多，希望對大家有所幫助！