Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

คุณสมบัติ HTML DOM Style fontSizeAdjust


คุณสมบัติ HTML DOM Style fontSizeAdjust ใช้สำหรับตั้งค่าขนาดฟอนต์โดยอิงจากความสูงของตัวอักษร x พิมพ์เล็กและ X พิมพ์ใหญ่ ให้การควบคุมขนาดฟอนต์ดีกว่าคุณสมบัติ fontSize

หมายเหตุ: คุณสมบัตินี้รองรับเฉพาะ Mozilla Firefox เท่านั้น

ไวยากรณ์ (Syntax)

การตั้งค่าคุณสมบัติ fontSizeAdjust:

object.style.fontSizeAdjust = "none|number|initial|inherit"

ค่าของคุณสมบัติ (Property Values)

ค่า คำอธิบาย
none ไม่ปรับขนาดฟอนต์ (ค่าเริ่มต้น)
number ใช้คำนวณอัตราส่วน aspect value โดยการหาร x-height ของฟอนต์แรกด้วยฟอนต์ที่สองและคูณด้วยตัวเลขที่กำหนด
initial ตั้งค่าคุณสมบัติเป็นค่าเริ่มต้น
inherit สืบทอดค่าคุณสมบัติจากองค์ประกอบพาเรนต์

ตัวอย่างการใช้งาน

<!DOCTYPE html> <html> <head> <style> 
    .one { 
        font-family: verdana; 
    } 
    .two { 
        font-family: 'times new roman'; 
    } 
    #demo1, #demo2 { 
        font-size-adjust: 0.5; 
    } 
</style> <script> 
    function adjustFontSize() { 
        document.getElementById("demo1").style.fontSizeAdjust = "1"; 
        document.getElementById("demo2").style.fontSizeAdjust = "1"; 
        document.getElementById("Sample").innerHTML = "คุณสมบัติ fontSizeAdjust ของข้อความใน div เพิ่มเป็น 1 แล้ว"; 
    } 
</script> </head> <body> 
    <div class="one">This is demo text</div><br/> 
    <div id="demo1" class="one">This is demo text</div><br/> 
    <div class="two">This is demo text</div><br/> 
    <div id="demo2" class="two">This is demo text</div> 
    <p>คลิกปุ่มด้านล่างเพื่อเปลี่ยนคุณสมบัติ fontSizeAdjust ของข้อความใน div</p> 
    <button onclick="adjustFontSize()">เปลี่ยน fontSizeAdjust</button> 
    <p id="Sample"></p> 
</body> </html>

ผลลัพธ์

คุณสมบัติ HTML DOM Style fontSizeAdjust

เมื่อคลิกปุ่ม "เปลี่ยน fontSizeAdjust":

คุณสมบัติ HTML DOM Style fontSizeAdjust