คุณสมบัติ HTML DOM Style font ใช้สำหรับตั้งค่าหรือดึงค่าของคุณสมบัติ 6 อย่างคือ font-style, font-variant, font-weight, font-size, line-height และ font-family ขนาดฟอนต์และฟอนต์เฟมิลี่เป็นค่าที่จำเป็น และสามารถตั้งค่าเริ่มต้นสำหรับค่าอื่นที่ขาดหายไปได้
ไวยากรณ์ (Syntax)
การส่งคืนคุณสมบัติ font:
object.style.font
การตั้งค่าคุณสมบัติ font:
| ค่า | คำอธิบาย |
|---|---|
| style | ตั้งค่าสไตล์ฟอนต์ |
| variant | ตั้งค่าข้อความเป็น small-caps font |
| weight | ระบุความหนาของฟอนต์ |
| size | ระบุขนาดฟอนต์ |
| lineHeight | ระบุระยะห่างระหว่างบรรทัด |
| family | ตั้งค่าฟอนต์เฟส |
| caption | ใช้ฟอนต์สำหรับ caption controls เช่น button, dropdowns ฯลฯ |
| icon | ระบุฟอนต์สำหรับ label icon |
| menu | ฟอนต์ที่ใช้ในเมนู |
| message-box | ฟอนต์ที่ใช้ใน dialog boxes |
| small-caption | ฟอนต์ที่ใช้ใน controls ขนาดเล็ก |
| status-bar | ตั้งค่าฟอนต์ status bar ของหน้าต่างเป็นฟอนต์ปัจจุบัน |
| initial | ตั้งค่าคุณสมบัติเป็นค่าเริ่มต้น |
| inherit | สืบทอดค่าคุณสมบัติจากพาเรนต์ |
ตัวอย่างการใช้งาน
<!DOCTYPE html> <html> <head> <style>
.PARA1 {
font: oblique 5deg small-caps bold 1.3em/3 cursive;
}
</style> <script>
function changeFont() {
for(var i = 0; i < 2; i++) {
document.getElementsByClassName("PARA1")[i].style.font = "italic bold 30px Verdana";
}
document.getElementById("Sample").innerHTML = "ข้อความในย่อหน้าสองย่อหน้าด้านบนถูกเปลี่ยนแล้ว";
}
</script> </head> <body>
<p class="PARA1">This is demo text</p>
<p class="PARA1">This is another demo text</p>
<p>คลิกปุ่มด้านล่างเพื่อเปลี่ยนฟอนต์ของ container div ด้านบน</p>
<button onclick="changeFont()">เปลี่ยน Font</button>
<p id="Sample"></p>
</body> </html>
ผลลัพธ์
เมื่อคลิกปุ่ม "เปลี่ยน Font":
เมื่อคลิกปุ่ม "เปลี่ยน Font":
