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

คุณสมบัติ HTML DOM Style listStyleImage ใช้สำหรับตั้งค่าหรือส่งคืนภาพเป็นเครื่องหมายรายการ (list item marker)

ไวยากรณ์ (Syntax)

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

object.style.listStyleImage = "none|url|initial|inherit"

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

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

<!DOCTYPE html> <html> <head> <script> 
    function changeListImage() { 
        document.getElementById("LIST1").style.listStyleImage = "url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Red_circle.svg/10px-Red_circle.svg.png')"; 
        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 image สำหรับรายการด้านบน</p> 
    <button type="button" onclick="changeListImage()">เปลี่ยน List Image</button> 
    <p id="Sample"></p> 
</body> </html>

ผลลัพธ์

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