PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


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

18 March 2009 By Ninenik Narkdee
ขนาดตัวอักษร ขนาด jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ขนาดตัวอักษร ขนาด 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>

ตัวอย่าง



อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ





Tags:: ขนาด jquery ขนาดตัวอักษร







URL สำหรับอ้างอิง