คุณสมบัติ HTML DOM Style listStyleType ใช้สำหรับตั้งค่าหรือส่งคืนประเภทเครื่องหมายรายการ (list-item marker)
ไวยากรณ์ (Syntax)
การตั้งค่าคุณสมบัติ listStyleType:
object.style.listStyleType = value
ค่าบางส่วนของคุณสมบัติ listStyleType
| ค่า | คำอธิบาย |
|---|---|
| armenian | ตั้งค่าเครื่องหมายเป็นตัวเลขอาร์เมเนียดั้งเดิม |
| circle | วงกลมเป็นเครื่องหมาย |
| cjk-ideographic | ตั้งค่าเครื่องหมายเป็นตัวเลขอิดโอกราฟิกธรรมดา |
| decimal | ตั้งค่าเครื่องหมายเป็นตัวเลข (ค่าเริ่มต้น) |
| decimal-leading-zero | เพิ่ม 0 นำหน้าตัวเลขที่เป็นเครื่องหมาย |
| disc | ค่าเริ่มต้นสำหรับ <ul> เครื่องหมายเป็นวงกลมทึบ |
| hiragana | ตั้งค่าหมายเลขฮิระกานะดั้งเดิมเป็นเครื่องหมาย |
| katakana | ตั้งค่าหมายเลขคะตะคานะดั้งเดิมเป็นเครื่องหมาย |
| lower-alpha | ตั้งค่าเครื่องหมายเป็นตัวอักษรพิมพ์เล็ก |
| lower-greek | ตั้งค่าตัวอักษรกรีกพิมพ์เล็กเป็นเครื่องหมาย |
| none | ไม่แสดงเครื่องหมาย |
| square | แสดงเครื่องหมายเป็นสี่เหลี่ยม |
| upper-alpha | ตั้งค่าเครื่องหมายเป็นตัวอักษรพิมพ์ใหญ่ |
| initial | ตั้งค่าคุณสมบัติเป็นค่าเริ่มต้น |
| inherit | สืบทอดค่าคุณสมบัติจากองค์ประกอบพาเรนต์ |
ตัวอย่างการใช้งาน
<!DOCTYPE html> <html> <head> <script>
function changeListType() {
document.getElementById("LIST1").style.listStyleType = "upper-roman";
document.getElementById("Sample").innerHTML = " ประเภทรูปแบบรายการตั้งเป็นตัวเลขโรมันพิมพ์ใหญ่ แล้ว";
}
</script> </head> <body>
<ul id="LIST1">
<li>LIST ITEM1</li>
<li>LIST ITEM2</li>
<li>LIST ITEM3</li>
<li>LIST ITEM4</li>
</ul>
<p>คลิกปุ่มด้านล่างเพื่อเปลี่ยน list style type ของรายการด้านบน</p>
<button type="button" onclick="changeListType()">เปลี่ยน List Type</button>
<p id="Sample"></p>
</body> </html>
ผลลัพธ์
เมื่อคลิกปุ่ม "เปลี่ยน list style":
