Cách đặt hình ảnh làm dấu mục (list-item marker) với JavaScript

Thuộc tính listStyleImage (CSS list-style-image) cho phép dùng hình ảnh tùy chỉnh thay vì bullet/number mặc định cho danh sách.

Ví dụ minh họa

Nhấn nút để đặt hình ảnh bullet cho danh sách:

<!DOCTYPE html>
<html>
<body>
  <ol id="myID">
    <li>Một</li>
    <li>Hai</li>
  </ol>
  <button type="button" onclick="display()">Cập nhật hình ảnh danh sách</button>
  <script>
    function display() {
      document.getElementById("myID").style.listStyleImage = "url('https://tutorialspoint.com/css/images/bullet.gif')";
    }
  </script>
</body>
</html>

Lưu ý và thực hành tốt

• Hình ảnh nên nhỏ (16x16px, 20x20px), định dạng PNG/GIF/SVG trong suốt.
• Nếu hình không load, bullet mặc định sẽ hiện ra (fallback tự động).
• Dùng shorthand listStyle để đặt cùng lúc: listStyle: "url(...) inside".
• Hiện nay thường dùng CSS ::marker pseudo-element hoặc background-image trên li::before để kiểm soát tốt hơn (kích thước, vị trí, khoảng cách).