本文给大家分享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实现点击按钮字体放大、缩小的相关知识就给大家介绍这么多，希望对大家有所帮助！