คุณสมบัติ HTML DOM Style fontSize ใช้สำหรับตั้งค่าหรือส่งคืนขนาดของฟอนต์
ไวยากรณ์ (Syntax)
การตั้งค่าคุณสมบัติ fontSize:
object.style.fontSize = "value|initial|inherit"
ค่าของคุณสมบัติ (Property Values)
| ค่า | คำอธิบาย |
|---|---|
| xx-small, x-small, small, medium, large, x-large, xx-large | ตั้งค่าขนาดฟอนต์จากค่าที่กำหนดตั้งแต่ xx-small ถึง xx-large |
| smaller | ลดขนาดฟอนต์ลงหน่วยสัมพัทธ์หนึ่งระดับ |
| larger | เพิ่มขนาดฟอนต์ขึ้นหน่วยสัมพัทธ์หนึ่งระดับ |
| length | กำหนดขนาดฟอนต์ด้วยหน่วยความยาวที่ถูกต้อง |
| % | ตั้งค่าขนาดฟอนต์ของ child element สัมพัทธ์กับ % ของ parent element |
| initial | ตั้งค่าคุณสมบัติเป็นค่าเริ่มต้น |
| inherit | สืบทอดค่าคุณสมบัติจากองค์ประกอบพาเรนต์ |
ตัวอย่างการใช้งาน
<!DOCTYPE html> <html> <head> <style>
li {
font-size: 1.1em;
background-color: snow;
font-family: cursive;
}
</style> <script>
function changeFontSize() {
for(var i = 0; i < 3; i++) {
document.getElementsByTagName("li")[i].style.fontSize = "xx-large";
}
document.getElementById("Sample").innerHTML = "ขนาดฟอนต์ของรายการด้านบนตั้งเป็น xx-large แล้ว";
}
</script> </head> <body>
<ul>
<li>This is list item 1.</li>
<li>This is list item 2</li>
<li>This is list item 3</li>
</ul>
<p>คลิกปุ่มด้านล่างเพื่อเปลี่ยนขนาดฟอนต์ของรายการด้านบน</p>
<button onclick="changeFontSize()">เปลี่ยนขนาดฟอนต์</button>
<p id="Sample"></p>
</body> </html>
ผลลัพธ์
เมื่อคลิกปุ่ม "เปลี่ยนขนาดฟอนต์":
