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

เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdee
jquery ขนาดตัวอักษร ขนาด

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery ขนาดตัวอักษร ขนาด

ดูแล้ว 22,281 ครั้ง


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











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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ