ホームページ > 記事 > ウェブフロントエンド > JavaScript は、クリックボタンによるフォントの拡大と縮小_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 を使用してクリック ボタンのフォント サイズを拡大および縮小する方法についての知識は以上です。お役に立てば幸いです。