フォントサイズをjQueryを使って変更

2018.03.15

フォントサイズをjqueryで変更は必ず必要とは限りませんが、ブラウザで文字サイズ変えられたり、拡大の方法がわからない人にとっては、必要になります。
(ブラウザの標準機能として文字の拡大の方法を知らないユーザーが多いことから、文字拡大機能を見える形でページ上に設置したほうが親切ということです。

下記では「大」「中」「小」とボタンを表示し、それぞれ押すことで、サイトの文字サイズを変更することが可能です。
■html

<div id="font">
     <ul>
       <li class="small">小</li>
       <li class="middle">中</li>
       <li class="large">大</li>
     </ul>
</div>

<ul>

</ul>

</div>

$(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");
		}
 	});
});