本文給大家分享js實現點擊按鈕字體放大縮小實例代碼，代碼簡單易懂，需要的朋友參考下吧
具體代碼如下所示：
<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" class="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 class="large">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
關於JavaScript實現點擊按鈕字體放大、縮小的相關知識就給大家介紹這麼多，希望對大家有所幫助！