[DOM_Style] JS - listStyleType 속성 - 리스트 마커 모양 (= listStyleType속성 / 리스트스타일타입속성)

목차

1. listStyleType 예제 - 리스트 마커 모양 설정
2. listStyleType 정의
3. listStyleType 구문
4. listStyleType 예제 - 리스트 마커 종류 확인
5. listStyleType 예제 - 리스트 마커 모양 반환

listStyleType 예제 - 리스트 마커 모양 설정

 

<ul id="hz">

  <li>HTML</li>

  <li>CSS</li>

  <li>JS</li>

</ul>

<button type="button" onclick="homzzang()">클릭</button>

 

<script>

function homzzang() {

  document.getElementById("hz").style.listStyleType = "upper-roman";

}

</script>

 

결과보기

listStyleType 정의

 

리스트 마커 모양 설정/반환.

 

---

 

1.

• 기본값: <ul> 경우: disc / <ol> 경우: dicimal
• CSS: list-style-type
• CSS버전: CSS1

 

2.

모든 브라우저 지원.

 

listStyleType 구문

 

[반환]

object.style.listStyleType

 

[설정]

object.style.listStyleType = value

 

---

[속성값]

 

• armenian - 전통적인 아르메니아 순번 마커
• circle - 원 모양 마커
• cjk-ideographic - 일반 표의 문자 순번 마커
• decimal - 숫자 순번 마커 (<ol> 기본값)
• decimal-leading-zero - 선행 0 있는 숫자 순번 마커 (예: 01, 02, ..,)
• disc - 채워진 원 마커 (<ul> 기본값)
• georgian - 전통적인 그루지야 순번 마커
• hebrew - 전통적인 히브리아 순번 마커
• hiragana - 전통적인 히라가나 순번 마커
• hiragana-iroha - 전통적인 히라가나 이로하 순번 마커
• katakana - 전통적인 가타카나 순번 마커
• katakana-iroha - 전통적인 Katakana iroha 순번 마커
• lower-alpha - 소문자 알파벳 순번 마커 (a, b, c, d, e 등)
• lower-greek - 소문자 그리스어 마커
• lower-latin - 소문자 라틴어 마커 (a, b, c, d, e 등)
• Lower-roman - 소문자 로자자 마커 (i, ii, iii, iv, v 등)
• none - 마커 표시 X
• square - 정사각형 마커
• upper-alpha - 대문자 알파벳 마커 (A, B, C, D, E 등)
• upper-latin - 대문자 라틴어 마커 (A, B, C, D, E 등)
• upper-roman - 대문자 로마자 마커 (I, II, III, IV, V 등)
• initial - 이 속성의 기본값으로 설정
• inherit - 부모요소의 속성값 상속 

 

---

[반환값]

 

리스트 마커 모양 나타내는 문자열 반환.

 

listStyleType 예제 - 리스트 마커 종류 확인

 

<ul id="hz">

  <li>HTML</li>

  <li>CSS</li>

  <li>JS</li>

</ul>

<select onchange="homzzang(this);" size="10">

  <option>armenian</option>

  <option>circle</option>

  <option>cjk-ideographic</option>

  <option>decimal</option>

  <option>decimal-leading-zero</option>

  <option>disc</option>

  <option>georgian</option>

  <option>hebrew</option>

  <option>hiragana</option>

  <option>hiragana-iroha</option>

  <option>inherit</option>

  <option>katakana</option>

  <option>katakana-iroha</option>

  <option>lower-alpha</option>

  <option>lower-greek</option>

  <option>lower-latin</option>

  <option>lower-roman</option>

  <option>none</option>

  <option>square</option>

  <option>upper-alpha</option>

  <option>upper-latin</option>

  <option>upper-roman</option>

</select>

<script>

function homzzang(selectTag) {

  var listValue = selectTag.options[selectTag.selectedIndex].text;

  document.getElementById("hz").style.listStyleType = listValue;

}

</script>

 

결과보기

listStyleType 예제 - 리스트 마커 모양 반환

 

<ul id="hz" style="list-style-type:circle;">

  <li>HTML</li>

  <li>CSS</li>

  <li>JS</li>

</ul>

<button type="button" onclick="homzzang()">클릭</button>

 

<script>

function homzzang() {

  alert(document.getElementById("hz").style.listStyleType);

}

</script>

 

결과보기