คุณสมบัติแบบอักษร HTML DOM Style ใช้สำหรับการตั้งค่าหรือรับคุณสมบัติหกประการ ได้แก่ font-style, font-variant, font-weight, font-size, line-height และ font-family ขนาดแบบอักษรและตระกูลแบบอักษรเป็นค่าแอตทริบิวต์ที่จำเป็น และสามารถตั้งค่าเริ่มต้นสำหรับค่าอื่นๆ ที่ขาดหายไปได้
ต่อไปนี้เป็นไวยากรณ์สำหรับการส่งคืนคุณสมบัติฟอนต์ -
object.style.font
การตั้งค่าคุณสมบัติแบบอักษร -
| ค่า | คำอธิบาย |
|---|---|
| สไตล์ | การฟอร์การตั้งค่าแบบอักษร |
| ตัวแปร | การฟอร์เซ็ทข้อความเป็นฟอนต์ตัวพิมพ์เล็ก |
| น้ำหนัก | กำหนดความหนาให้กับฟอนต์ |
| ขนาด | การกำหนดขนาดตัวอักษร |
| lineHeight | กำหนดระยะห่างระหว่างเส้น |
| ครอบครัว | การฟอร์การตั้งค่าแบบอักษร |
| คำบรรยาย | ใช้แบบอักษรกับตัวควบคุมคำอธิบายภาพเช่น ปุ่ม ดรอปดาวน์ ฯลฯ |
| ไอคอน | การกำหนดแบบอักษรไอคอนป้ายกำกับ |
| เมนู | ฟอนต์ที่ใช้ในเมนู |
| กล่องข้อความ | ฟอนต์ที่ใช้ในกล่องโต้ตอบ |
| คำบรรยายเล็ก | แบบอักษรที่ใช้ในตัวควบคุมขนาดเล็ก |
| แถบสถานะ | ตั้งค่าแบบอักษรของแถบสถานะหน้าต่างเป็นแบบอักษรปัจจุบัน |
| ค่าเริ่มต้น | การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
| สืบทอด | รับค่าคุณสมบัติหลัก |
เรามาดูตัวอย่างคุณสมบัติของฟอนต์กัน −
ตัวอย่าง
<!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="The text in the above two paragraphs is now changed";
}
</script>
</head>
<body>
<p class="PARA1">This is demo text</p>
<p class="PARA1">This is another demo text</p>
<p>Change the above container div flex direction by clicking the below button</p>
<button onclick="changeFont()">Change Font</button>
<p id="Sample"></p>
</body>
</html> ผลลัพธ์
เมื่อคลิกปุ่ม “เปลี่ยนแบบอักษร ปุ่ม −
เมื่อคลิกปุ่ม “เปลี่ยนแบบอักษร ปุ่ม −
