フォントサイズをjqueryで変更は必ず必要とは限りませんが、ブラウザで文字サイズ変えられたり、拡大の方法がわからない人にとっては、必要になります。
(ブラウザの標準機能として文字の拡大の方法を知らないユーザーが多いことから、文字拡大機能を見える形でページ上に設置したほうが親切ということです。
下記では「大」「中」「小」とボタンを表示し、それぞれ押すことで、サイトの文字サイズを変更することが可能です。
■html
1 2 3 4 5 6 7 |
<div id="font"> <ul> <li class="small">小</li> <li class="middle">中</li> <li class="large">大</li> </ul> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(function(){ $("#font li").click(function(){ $("#fontSize li").removeClass("current"); var fontCss = $(this).attr("class"); $(this).addClass("current"); if(fontCss == "large"){ $("body").css("fontSize","0.875em"); }else if(fontCss == "middle"){ $("body").css("fontSize","0.75em"); }else{ $("body").css("fontSize","0.625em"); } }); }); |
閲覧しているページの文字サイズを大きく表示したいという必要性はあるので、
そのニーズを満たすことはできますが、これはユーザーエージェント側で担うべきです。
コメント