목록 항목의 마커(불릿) 유형을 설정하려면 listStyleType 속성을 사용하면 됩니다. 이 속성을 통해 square(사각형), circle(속이 빈 원), disc(속이 찬 원), decimal(숫자) 등 다양한 마커 스타일을 지정할 수 있습니다.
예제
다음 코드를 실행하면 JavaScript로 목록 항목의 마커 유형을 동적으로 변경할 수 있습니다. 버튼을 클릭하면 목록 스타일이 각각 사각형(square)과 숫자(decimal)로 바뀌는 것을 확인해 보세요.
<!DOCTYPE html>
<html>
<body>
<ul id="myID">
<li>One</li>
<li>Two</li>
</ul>
<button type="button" onclick="displaySquare()">목록 스타일 변경 (square)</button>
<button type="button" onclick="displayDecimal()">목록 스타일 변경 (decimal)</button>
<script>
function displaySquare() {
document.getElementById("myID").style.listStyleType = "square";
}
function displayDecimal() {
document.getElementById("myID").style.listStyleType = "decimal";
}
</script>
</body>
</html>위 예제에서 document.getElementById()로 목록 요소를 가져온 뒤, style.listStyleType에 원하는 값을 할당하는 방식으로 마커 유형을 변경합니다. CSS에서 사용되는 모든 list-style-type 값(예: circle, square, decimal, lower-roman, upper-alpha 등)을 JavaScript에서도 동일하게 적용할 수 있습니다.