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

คุณสมบัติ HTML DOM Style listStyle ใช้สำหรับตั้งค่าหรือส่งคืนคุณสมบัติ 3 อย่างคือ list-style-type, list-style-position และ list-style-image

ไวยากรณ์ (Syntax)

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

object.style.listStyle = "type position image|initial|inherit"

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

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

<!DOCTYPE html> <html> <head> <script> 
    function changeListStyle() { 
        document.getElementById("LIST1").style.listStyle = "upper-roman"; 
        document.getElementById("Sample").innerHTML = "รูปแบบรายการถูกเปลี่ยนเป็นตัวเลขโรมันพิมพ์ใหญ่"; 
    } 
</script> </head> <body> 
    <ul id="LIST1"> 
        <li>MANGO</li> 
        <li>GUAVA</li> 
        <li>LITCHI</li> 
        <li>WATERMELON</li> 
    </ul> 
    <p>คลิกปุ่มด้านล่างเพื่อเปลี่ยน list style สำหรับ div ด้านบน</p> 
    <button type="button" onclick="changeListStyle()">เปลี่ยน list style</button> 
    <p id="Sample"></p> 
</body> </html>

ผลลัพธ์

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