【jQuery】+-ボタンでフォントサイズを徐々に変更する


+-のSpanタグを利用して徐々にサイズ変更をさせるサンプルです。サンプルコードのf(e,o,v)では+1px, -1pxずつの変更をしています。

e:サイズ変更対象のタグidを指定してオブジェクトを渡す。o:表示用のidを指定してオブジェクトを渡す。

変更後のサイズはmySizeへ表示します。


   <script>function f(e,o,v){var s=parseInt(e.css('font-size'))+v; e.css('font-size', s); o.html(s);}</script>
   <span id="myFont" style='font-size:85%;'>フォントサイズを変更します。</span>
   <span onclick="f($('#myFont'), $('#mySize'), +1)">【+】</span>
   <span onclick="f($('#myFont'), $('#mySize'), -1)">【-】</span>
   <span id="mySize"></span>

投稿者: cova

ザムウ取締役CTO。2010年に香川県三豊市へ移住。フリーランスSEとして活動をはじめる。とある機構にて中小企業の経営支援と、小学校にてICT講習も務める。2022年現在、子育て支援NPO理事、短大専任講師を兼任する。 【主な資格】経営学修士(MBA)修了、国家試験応用情報技術者、国内初の夫婦ITコーディネーター。 その他、2022年4月:2児(4歳・1歳)の父。 #赤ちゃんから学ぶ経営学 を配信。