목차
- <ol> 객체 정의 - 순서 있는 리스트
- <ol> 객체 구문
- <ol> 객체 예제 - 접근
- <ol> 객체 예제 - 생성
- <ol> 객체 속성
<ol> 객체 정의 - 순서 있는 리스트
HTML <ol> 태그(요소) 의미.
<ol> 객체 구문
[접근]
var x = document.getElementById("요소ID");
[생성]
var x = document.createElement("OL");
<ol> 객체 예제 - 접근
<ol id="hz">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ol>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var x = document.getElementById("hz");
x.start = "101";
}
</script>
결과보기
<ol> 객체 예제 - 생성
<button onclick="homzzang()">클릭</button>
<p id="demo"></p>
<script>
function homzzang() {
var x = document.createElement("OL");
x.setAttribute("id", "hz");
document.body.appendChild(x);
var y = document.createElement("LI");
var t = document.createTextNode("HTML");
y.appendChild(t);
document.getElementById("hz").appendChild(y);
}
</script>
결과보기
<ol> 객체 속성
compact
HTML5 제외. 대신 style.lineHeight 속성 사용.
목록을 일반보다 작게 렌더링해야하는지 여부 설정/반환.
reversed
목록 순서를 내림차순으로 설정할지 여부를 설정/반환.
start
순서가 지정된 목록의 특정 stat (= 시작값) 설정/반환.
type
순서리스트의 type 속성값 설정/반환.
※ <ol> 객체는 표준 속성/메서드/이벤트 지원.