【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として活動をはじめる。領域としてWeb系から組込み系+サーバ構築。中小企業基盤整備機構にて中小企業の経営支援と、小学校にてICT講習を務める。2021年現在、子育て支援NPO理事、短大専任講師を兼任する。 【主な資格】経営学修士(MBA)修了、国家試験応用情報技術者、国内初の夫婦ITコーディネーター。 その他、2021年4月:2児(3歳・0歳)の父に就任。 #赤ちゃんから学ぶ経営学 を配信。