JavaScript实现点击按钮字体放大、缩小

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