สอบถามเกี่ยวกับ code เพิ่มลดขนาดตัวอักษร

wave
thiraphat Yotharak
2,083
สอบถามเกี่ยวกับ code เพิ่มลดขนาดตัวอักษร

<p> ผมก้อบ ชุด code และแยกเก็บตามนามสกุลไฟล์ พอรัน ก้ไม่มีไรเกิดขึ้น ยังไม่สามารถกดเพิ่ม หรือ ลด ได้ รบกวนช่วยดูให้นิดนึงครับ ว่ามันติดตรงไหน <br> <br> ใน html----------------------------- <br> <br> &lt;HEAD&gt; <br> &lt;TITLE&gt; New Document &lt;/TITLE&gt; <br> &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; <br> <br> &lt;link type="text/css" href="css.css" rel="stylesheet" /&gt; <br> &lt;script type="text/javascript" src="js.js"&gt;&lt;/script&gt; <br> <br> &lt;/style&gt; <br> &lt;/HEAD&gt; <br> <br> &lt;BODY&gt; <br> &lt;p&gt;xxxxxxxx&lt;/p&gt; <br> &lt;div &gt; <br> &lt;button&gt;A -&lt;/button&gt; <br> &lt;button&gt;A +&lt;/button&gt; <br> &lt;/div&gt; <br> &lt;/BODY&gt; <br> &lt;/HTML&gt; <br> <br> <br> ใน css------------------------------- <br> <br> .mFont button{ <br> width:50px; <br> height:20px; <br> text-align:center; <br> display:block; <br> float:left; <br> background-color: black; <br> color:blue; <br> font-size:10px; <br> font-weight:bold; <br> border:1px solid blue ; <br> margin-right:2px; <br> line-height:17px; <br> cursor:pointer; <br> font-family:tahoma; <br> } <br> <br> ใน js-------------------------------------- <br> <br> &lt;script type="text/javascript"&gt; <br> $(function(){ <br> var minFont=8; // กำหนดขนาดตัวอักษรต่ำสุด <br> var maxFont=18; // กำหนดขนาดตัวอักษรสูงสุด <br> var nowFont=12; // กำหนดขนาดตัวอักษรเริมต้น <br> var objSet="p"; // แท็กที่ต้องการกำหนดขนาดตัวอักษร อาจใช้เป็น * หรือ a หรือ a.menu เป็นต้น <br> $(objSet).css("font-size",nowFont); <br> $(".mFont button").click(function(){ <br> var inCase=$(this).text(); <br> if(inCase=="A +"){ <br> if(nowFont&lt;maxFont){ <br> nowFont++; <br> }else{ <br> nowFont=maxFont; <br> } <br> $(objSet).css("font-size",nowFont); <br> } <br> if(inCase=="A -"){ <br> if(nowFont&gt;minFont){ <br> nowFont--; <br> }else{ <br> nowFont=minFont; <br> } <br> $(objSet).css("font-size",nowFont); <br> } <br> }); <br> }); <br> <br> รบกวนช่วยติด้วยครับ หากมีจุดไหนผิด ขอบคุณครับ</p>

2 ความคิดเห็น

  • มานพ กองอุ่น

  • thiraphat Yotharak
thiraphat Yotharak

ผมก้อบ ชุด code และแยกเก็บตามนามสกุลไฟล์ พอรัน ก้ไม่มีไรเกิดขึ้น ยังไม่สามารถกดเพิ่ม หรือ ลด ได้ รบกวนช่วยดูให้นิดนึงครับ ว่ามันติดตรงไหน

ใน html-----------------------------

<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link type="text/css" href="css.css" rel="stylesheet" />
<script type="text/javascript" src="js.js"></script>

</style>
</HEAD>

<BODY>
<p>xxxxxxxx</p>
<div >
<button>A -</button>
<button>A +</button>
</div>
</BODY>
</HTML>


ใน css-------------------------------

.mFont button{
width:50px;
height:20px;
text-align:center;
display:block;
float:left;
background-color: black;
color:blue;
font-size:10px;
font-weight:bold;
border:1px solid blue ;
margin-right:2px;
line-height:17px;
cursor:pointer;
font-family:tahoma;
}

ใน js--------------------------------------

<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);
}
});
});

รบกวนช่วยติด้วยครับ หากมีจุดไหนผิด ขอบคุณครับ

มานพ กองอุ่น

สวัสดีครับ ทำได้หลายแนวทางนะครับ

อีกแนวทางที่น่าทำคือใช้ jQuery ช่วยครับ ดูตัวอย่างได้จาก Tutorial นี้ครับ

http://www.programming-free.com/2013/12/increase-decrease-font-size-jquery.html

ตอบ/อธิบาย

เข้าสู่ระบบเพื่อตอบกระทู้นี้