jQueryを使用してフォントサイズを切り替える方法
最近のWEBサイトでは、よくフォントサイズの切り替えを行うスクリプトがありますが、あれをjQueryだけで実装するエントリーHow to increase and decrease the font-size of content present in a div container using jQueryのご紹介。
よくCSSを切り替えるタイプのがありましたが、あれだとCSSを複数用意しなければいけないためフォントサイズだけ切り替えるには少し大仰でした。
以下のようなコードで自由にフォントサイズの範囲を設定することが可能になっています。
08 | $(document).ready(function(){ |
10 | var ChildElements=$('.font_size_change_container *'); |
13 | $("#inc_font").click(function(){ |
14 | var fontSizeNew=parseInt(($('.font_size_change_container *').css("font-size")).replace(/px/,"")); |
15 | if(fontSizeNew!=maxValue){fontSizeNew += 1;} |
16 | ChildElements.css("font-size",fontSizeNew+"px"); |
20 | $("#dec_font").click(function(){ |
21 | var fontSizeNew=parseInt(($('.font_size_change_container *').css("font-size")).replace(/px/,"")); |
22 | if(fontSizeNew!=minValue){fontSizeNew -= 1;} |
23 | ChildElements.css("font-size",fontSizeNew+"px"); |
元記事にはデモがあるので実際の動作を確認する事が可能になっています。
jQuery単体でこんなに簡単に実装できたんですね。いつか使うかもしれないのでメモ。
この記事が気に入ったら
いいね！しよう
最新情報をお届けします
