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

คุณสมบัติ HTML DOM Style fontVariant ใช้สำหรับตั้งค่าหรือส่งคืนว่าฟอนต์ควรแปลงเป็น small-caps หรือไม่ ใน small-caps ตัวอักษรพิมพ์เล็กทั้งหมดจะถูกแปลงเป็นพิมพ์ใหญ่แต่ขนาดเท่ากับพิมพ์เล็ก ตัวอักษรพิมพ์ใหญ่เดิมจะไม่ได้รับผลกระทบ

ไวยากรณ์ (Syntax)

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

object.style.fontVariant = "normal|small-caps|initial|inherit"

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

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

<!DOCTYPE html> <html> <head> <style> 
    #demo2, #demo1 { 
        font-family: 'times new roman'; 
        font-size: 25px; 
    } 
</style> <script> 
    function changeFontVariant() { 
        document.getElementById("demo1").style.fontVariant = "small-caps"; 
        document.getElementById("demo2").style.fontVariant = "small-caps"; 
        document.getElementById("Sample").innerHTML = "คุณสมบัติ font variant ถูกเปลี่ยนเป็น small caps แล้ว"; 
    } 
</script> </head> <body> 
    <div id="demo1">This is demo text</div> 
    <div id="demo2">This is demo text</div> 
    <p>คลิกปุ่มด้านล่างเพื่อเปลี่ยนคุณสมบัติ font variant ของข้อความใน div</p> 
    <button onclick="changeFontVariant()">เปลี่ยน Font Variant</button> 
    <p id="Sample"></p> 
</body> </html>

ผลลัพธ์

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