Thuộc tính HTML DOM Style listStyleImage được sử dụng để thiết lập hoặc trả về hình ảnh dưới dạng điểm đánh dấu mục danh sách.
Sau đây là cú pháp cho -
Đặt thuộc tính listStyleImage -
object.style.listStyleImage = "none|url|initial|inherit"
Các thuộc tính trên được giải thích như sau -
| Giá trị | Mô tả |
|---|---|
| không có | Đây là giá trị mặc định và không hiển thị hình ảnh. |
| url | Xác định sai đường dẫn hình ảnh. |
| tên ban đầu | Đang xác nhận thuộc tính này về giá trị ban đầu. |
| kế thừa | Kế thừa giá trị thuộc tính mẹ |
Chúng ta hãy xem một ví dụ cho thuộc tính listStyleImage -
Ví dụ
<!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=" The list marker has been replaced by a red circle image";
}
</script>
</head>
<body>
<ul id="LIST1">
<li>LIST ITEM1</li>
<li>LIST ITEM2</li>
<li>LIST ITEM3</li>
<li>LIST ITEM4</li>
</ul>
<p>Click the below button to set the list style image for the above list</p>
<button type="button" onclick="changeListImage()">Change List Image</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Khi nhấp vào “ Thay đổi hình ảnh danh sách Nút ”-
