เพิ่มลดขนาดตัวอักษรในหน้าเว็บแบบง่ายด้วย jQuery

CSS Code

<style type="text/css">
.mFont button{
	width:50px;
	height:20px;
	text-align:center;
	display:block;
	float:left;
	background-color:#000000;
	color:#FFFFFF;
	font-size:12px;
	font-weight:bold;
	border:1px solid #666666;
	margin-right:2px;
	line-height:17px;
	cursor:pointer;
       	font-family:tahoma;
}
</style>

HTML Code

<div class="mFont">
<button>A -</button>
<button>A +</button>
</div>

Javascript Code

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function(){
	var minFont=8; // กำหนดขนาดตัวอักษรต่ำสุด
	var maxFont=18; //  กำหนดขนาดตัวอักษรสูงสุด
	var nowFont=12; // กำหนดขนาดตัวอักษรเริมต้น
	var objSet="p"; // แท็กที่ต้องการกำหนดขนาดตัวอักษร อาจใช้เป็น * หรือ a หรือ a.menu เป็นต้น
	$(objSet).css("font-size",nowFont);
	$(".mFont button").click(function(){
			var inCase=$(this).text();
			if(inCase=="A +"){
				if(nowFont<maxFont){
					nowFont++;
				}else{
					nowFont=maxFont;
				}
				$(objSet).css("font-size",nowFont);
			}
			if(inCase=="A -"){
				if(nowFont>minFont){
					nowFont--;
				}else{
					nowFont=minFont;
				}
				$(objSet).css("font-size",nowFont);
			}
	});
});
</script>

ตัวอย่าง