Thuộc tính listStyleImage trong HTML DOM Style

Giới thiệu

Thuộc tính listStyleImage trong HTML DOM Style dùng để thiết lập hoặc lấy một hình ảnh làm dấu mục (marker) cho mục danh sách.

Cú pháp

Thiết lập listStyleImage:

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

Giá trị

Giá trị	Mô tả
none	Mặc định: không hiển thị hình ảnh.
url	Chỉ định đường dẫn hình ảnh (ví dụ: `url('path/to/image.png')`).
initial	Đặt về giá trị mặc định.
inherit	Kế thừa từ phần tử cha.

Ví dụ

Ví dụ thay thế dấu mục mặc định bằng hình ảnh tròn đỏ nhỏ.

<!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 = "Dấu mục danh sách đã được thay bằng hình ảnh tròn đỏ"; 
  } 
</script> </head> <body> 
  <ul id="LIST1"> 
    <li>LIST ITEM1</li> 
    <li>LIST ITEM2</li> 
    <li>LIST ITEM3</li> 
    <li>LIST ITEM4</li> 
  </ul> 
  <p>Nhấn nút để đặt hình ảnh làm dấu mục cho danh sách</p> 
  <button type="button" onclick="changeListImage()">Thay đổi List Image</button> 
  <p id="Sample"></p> 
</body> </html>

Kết quả

Thuộc tính listStyleImage trong HTML DOM Style

Sau khi nhấn nút Thay đổi List Image:

Thuộc tính listStyleImage trong HTML DOM Style