HTML DOM OL start 속성이란?
HTML DOM의 start 속성은 순서 있는 목록(<ol>) 요소의 start 속성 값을 가져오거나 설정하는 데 사용됩니다. 이 속성을 활용하면 목록 번호가 기본값인 1이 아닌 다른 숫자부터 시작하도록 지정할 수 있으며, JavaScript를 통해 실행 중에도 동적으로 변경할 수 있습니다.
문법(Syntax)
start 속성의 현재 값을 숫자로 반환하는 문법은 다음과 같습니다.
olObject.start
start 속성에 원하는 숫자를 설정하는 문법은 다음과 같습니다.
olObject.start = number
예제: OL start 속성 활용하기
다음 예제는 start='2'로 설정된 학생 명단 목록에서 버튼을 클릭하면 start 값을 1로 변경하여 번호를 처음부터 다시 매기는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Ol start</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
ol{
width: 30%;
margin: 0 auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-Ol-start</legend>
<h3>Students</h3>
<ol id="orderList" start='2'>
<li>Zampa</li>
<li>Rajesh</li>
<li>Eden</li>
<li>Bina</li>
<li>Alex</li>
<li>Adam</li>
</ol>
<input type="button" onclick="reverseNumbering()" value="Correct list">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var studentList = document.getElementById("orderList");
function reverseNumbering() {
studentList.start = '1';
divDisplay.textContent = 'List Corrected';
}
</script>
</body>
</html>
실행 결과
'Correct List' 버튼을 클릭하기 전에는 start 속성이 2로 설정되어 있어 목록이 2번부터 번호가 매겨집니다.
버튼을 클릭한 후에는 reverseNumbering() 함수가 실행되어 start 값이 1로 변경되고, 목록이 1번부터 다시 번호가 매겨지며 화면에는 'List Corrected'라는 메시지가 표시됩니다.
정리 및 참고 사항
- olObject.start : 현재 목록의 시작 번호를 반환합니다.
- olObject.start = number : 시작 번호를 지정한 숫자로 변경합니다.
- start 속성에는 양의 정수뿐만 아니라 0이나 음수도 설정할 수 있습니다.
- type 속성(A, a, I, i, 1)과 조합하면 알파벳, 로마자 등 다양한 형식의 번호 매기기를 구현할 수 있습니다.