PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

18 March 2009 By
ขนาดตัวอักษร 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>

ตัวอย่าง







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






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


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