목록 항목(list-item)의 마커를 이미지로 설정하려면 자바스크립트에서 listStyleImage 속성을 사용하면 됩니다. 이 속성은 CSS의 list-style-image 속성에 대응하며, 순서 있는 목록(<ol>)과 순서 없는 목록(<ul>) 모두에 적용할 수 있습니다.
listStyleImage 속성이란?
listStyleImage 속성은 목록 항목 앞에 기본적으로 표시되는 마커(숫자, 불릿 등) 대신 지정한 이미지를 표시해 줍니다. 값은 url('이미지 경로') 형식으로 지정하며, none을 설정하면 이미지 마커가 제거됩니다.
예제
아래 코드를 실행한 후 버튼을 클릭하면, 자바스크립트를 통해 목록 항목의 마커가 이미지로 변경됩니다.
<!DOCTYPE html>
<html>
<body>
<ol id="myID">
<li>One</li>
<li>Two</li>
</ol>
<button type="button" onclick="display()">Update list image</button>
<script>
function display() {
document.getElementById("myID").style.listStyleImage = "url('https://tutorialspoint.com/css/images/bullet.gif')";
}
</script>
</body>
</html>코드 설명
document.getElementById("myID"): id가 "myID"인 <ol> 요소를 가져옵니다..style.listStyleImage: 해당 요소의 인라인 스타일에서 목록 마커 이미지를 설정합니다.url('...'): 마커로 사용할 이미지 파일의 경로를 지정합니다. 상대 경로와 절대 URL 모두 사용할 수 있습니다.
버튼을 클릭하면 display() 함수가 실행되어 목록의 각 항목 앞에 지정된 이미지(bullet.gif)가 마커로 표시됩니다. 이처럼 listStyleImage 속성을 활용하면 기본 불릿 대신 원하는 아이콘이나 이미지로 목록 스타일을 손쉽게 꾸밀 수 있습니다.