HTML DOM의 Ol reversed 속성은 순서 있는 목록(<ol>)의 항목 번호가 내림차순으로 표시될지, 아니면 기본값인 오름차순으로 표시될지를 설정하거나 반환하는 속성입니다.
구문(Syntax)
reversed 속성의 기본 구문은 다음과 같습니다.
1. 불리언 값 반환
olObject.reversed
위 구문은 현재 목록에 설정된 불리언 값(true/false)을 반환합니다.
2. 불리언 값 설정
olObject.reversed = booleanValue
여기서 booleanValue에 지정할 수 있는 값은 다음과 같습니다.
| booleanValue | 설명 |
|---|---|
| true | 목록 번호가 내림차순으로 표시됩니다. |
| false | 목록 번호가 오름차순으로 표시됩니다. (기본값) |
예제
다음 예제는 버튼을 클릭하면 학생 명단 목록의 번호 매기기를 내림차순으로 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Ol reversed</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-reversed</legend>
<h3>Students</h3>
<ol id="orderList">
<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.reversed = true;
divDisplay.textContent = 'List Corrected';
}
</script>
</body>
</html>
출력 결과
'Correct List' 버튼을 클릭하기 전 화면입니다. 목록이 기본값인 오름차순(1~6)으로 번호가 매겨져 있습니다.
'Correct List' 버튼을 클릭한 후 화면입니다. reversed 속성이 true로 설정되어 목록 번호가 내림차순(6~1)으로 변경된 것을 확인할 수 있습니다.
