목록 개체(dl, ol, ul)의 목록 스타일(listStyle)을 반환하거나 설정한다.

인수
cssSelector : (스타일 선택자)
속성을 가질수 있는 엘레멘트()나 클라스(class) 이름 혹은 인식자(id)이다.

: (속성 문자열)
스타일 속성은 목록 개체(dl, ol, ul)의 복합 목록 스타일(listStyle)을 나타내는 아래 항목들의 연속 문자열이다.

(type) listStyleType 속성에 적용될 수 잇는 목록 스타일 형식이다.
(position) listStylePosition 속성에 적용될 수 잇는 목록 스타일 위치값이다.
(image) listStyleImage 속성에 적용될 수 잇는 목록 스타일 이미지 값이다.

읽기/쓰기로 디폴트값은 disc outside none이다.

속성값은 스타일쉬트 애트리뷰트에서 상속된다.

특기

listStyle 속성은 복합 축약 스타일 속성이다. type과 image 값을 동시에 지정하는 경우, image 값이 none으로 설정되어 있거나 이미지 값이 자정하는 주소의 이미지를 디스플레이할 수 없는 경우를 제외하고는 image 값이 우선한다.

listStyle 속성도 display 속성이 list-item인 모든 엘레멘트에 적용된다. 불렛 모양이 나타나게 하려면, 이들 엘레멘트에서 margin 속성을 명시적으로 지정하거나 listStylePosition 속성을 inside로 설정하여야 한다.

적용
개체scriptCSS IE 버전
참고
listStyleType listStylePosition listStyleImage

이 속성은 CSS1(Cascading Style Sheets, Level 1)에서 정의되었다.



이 인라인 스크립트 코드는 목록의 스타일을 변경시키는데, 지정된 이미지가 없으면 원형(o) 불렛이 표시된다.

<UL onmouseover="this.style.listStyle='url(path/dot.gif) circle';" onmouseout="this.style.listStyle='disc outside none';">
<LI>목록 1 항목 1에 마우스를 올려보라.
<LI>목록 1 항목 2에 마우스를 올려보라.
</UL><BR>

<UL  onmouseover="this.style.listStyle='url(../../gif/ball.gif) circle';" onmouseout="this.style.listStyle='disc outside none';">
<LI>목록 2 항목 1에 마우스를 올려보라.
<LI>목록 2 항목 2에 마우스를 올려보라.
</UL>

여기에 마우스를 올려보라.

IE6에서 새로이 가능한 값은 , display 속성을 list-item로 설정된 엘레멘트에서 listStyle 속성도 적용될 수 있음을 보여준다.

<DIV style="cursor:hand;border:solid 1 blue;width:400"
  onmouseover="this.style.display='list-item';this.style.listStyle='circle inside none'"
  onmouseout="this.style.display='';">여기에 마우스를 올려보라.
</DIV>

결과 표시창
<STYLE>
.myStyle1{list-style: outside url(../../gif/ball.gif)}
.myStyle2{list-style: inside circle}
</STYLE>
<UL class=myStyle2 id=ulObj>
<LI>항목 1
<LI>항목 2
<LI>항목 3
</UL>
<BUTTON onmouseover="ulObj.className='myStyle1';showA.innerHTML=ulObj.className"
  onmouseout="ulObj.className='myStyle2';showA.innerHTML=ulObj.className">마우스를 올려보라.</BUTTON>
<DIV id=showA>결과 표시창</DIV>