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 เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ



บริการเว็บ server web hosting
บริการเว็บ server web hosting


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







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