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

คุณสมบัติ HTML DOM Style listStylePosition ใช้สำหรับตั้งค่าหรือส่งคืนตำแหน่งของเครื่องหมายรายการ (list-item marker)

ไวยากรณ์ (Syntax)

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

object.style.listStylePosition = "outside|inside|initial|inherit"

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

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

<!DOCTYPE html> <html> <head> <style> 
    li { 
        background-color: lightgreen; 
    } 
</style> <script> 
    function changeListPosition() { 
        document.getElementById("LIST1").style.listStylePosition = "inside"; 
        document.getElementById("Sample").innerHTML = " ตำแหน่งรูปแบบรายการตั้งเป็น inside จากค่าเริ่มต้น outside แล้ว"; 
    } 
</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 ของรายการด้านบน</p> 
    <button type="button" onclick="changeListPosition()">เปลี่ยน List Position</button> 
    <p id="Sample"></p> 
</body> </html>

ผลลัพธ์

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