목록 관련 속성들을 한 번의 선언으로 설정하려면 JavaScript의 listStyle 속성을 사용하면 됩니다. 이 속성은 CSS의 list-style 단축 속성에 해당하며, listStyleImage, listStylePosition, listStyleType 세 가지 속성을 한꺼번에 지정할 수 있습니다.
예제
다음 코드를 실행한 후 버튼을 클릭하면 listStylePosition과 listStyleType이 하나의 선언으로 동시에 변경됩니다.
<!DOCTYPE html>
<html>
<body>
<ol id="myID">
<li>One</li>
<li>Two</li>
</ol>
<button type="button" onclick="display()">Change style</button>
<script>
function display() {
document.getElementById("myID").style.listStyle = "circle outside";
}
</script>
</body>
</html>코드 설명
위 예제에서 listStyle 속성에 지정한 "circle outside" 값은 각각 다음을 의미합니다.
- circle: 목록 항목 앞에 표시되는 마커를 원 모양으로 지정합니다. 즉, listStyleType에 해당하는 값입니다.
- outside: 마커가 텍스트 블록 바깥쪽에 위치하도록 지정합니다. 즉, listStylePosition에 해당하는 값입니다.
이처럼 listStyle 속성에 값을 공백으로 구분하여 나열하면 개별 속성을 따로 설정할 필요 없이 한 번의 선언으로 목록 스타일을 손쉽게 변경할 수 있습니다. 필요에 따라 세 번째 값으로 이미지 URL을 추가하여 listStyleImage까지 함께 지정할 수도 있습니다.