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

18 March 2009 เขียนเมื่อ 16 ปีก่อน โดย Ninenik Narkdee

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

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

ดูแล้ว 23,062 ครั้ง

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