listStyleType, listStylePosition, listStyleImage 속성 예제

UL
  • 번호없는 목록 항목 1
  • 번호없는 목록 항목 2
  • 번호없는 목록 항목 3
listStyleType
OL
  1. 번호있는 목록 항목 1
  2. 번호있는 목록 항목 2
  3. 번호있는 목록 항목 3
listStyleType
공통 listStylePosition
listStyleImage
<STYLE>.but{width:90}</STYLE>
<TABLE border=1>
<TR>
<TH rowspan=2>UL</TH>
<TD colspan=7>
<UL id=ulObj>
<LI>번호없는 목록 항목 1
<LI>번호없는 목록 항목 2
<LI>번호없는 목록 항목 3
</UL>
</TD>
</TR>
<TR>
<TD class=style>listStyleType</TD>
<TD><BUTTON onclick="ulObj.style.listStyleType='disc';" class=but>disc</BUTTON></TD>
<TD><BUTTON onclick="ulObj.style.listStyleType='circle';" class=but>circle</BUTTON></TD>
<TD><BUTTON onclick="ulObj.style.listStyleType='square';" class=but>square</BUTTON></TD>
<TD><BUTTON onclick="ulObj.style.listStyleType='none';" class=but>none</BUTTON></TD>
</TR>
<TR>
<TH rowspan=2>OL</TH>
<TD colspan=7>
<OL id=olObj>
<LI>번호있는 목록 항목 1
<LI>번호있는 목록 항목 2
<LI>번호있는 목록 항목 3
</OL>
</TD>
<TR>
<TD class=style>listStyleType</TD>
<TD><BUTTON onclick="olObj.style.listStyleType='decimal';" class=but>decimal</BUTTON></TD>
<TD><BUTTON onclick="olObj.style.listStyleType='lower-roman';" class=but>lower-roman</BUTTON></TD>
<TD><BUTTON onclick="olObj.style.listStyleType='upper-roman';" class=but>upper-roman</BUTTON></TD>
<TD><BUTTON onclick="olObj.style.listStyleType='lower-alpha';" class=but>lower-alpha</BUTTON></TD>
<TD><BUTTON onclick="olObj.style.listStyleType='upper-alpha';" class=but>upper-alpha</BUTTON></TD>
<TD><BUTTON onclick="olObj.style.listStyleType='none';" class=but>none</BUTTON></TD>
</TR>
<TR>
<TH rowspan=2>공통</TH>
<TD class=style>listStylePosition</TD>
<TD><BUTTON onclick="ulObj.style.listStylePosition=olObj.style.listStylePosition='outside';" class=but>outside</BUTTON></TD>
<TD><BUTTON onclick="ulObj.style.listStylePosition=olObj.style.listStylePosition='inside';" class=but>inside</BUTTON></TD>
</TR>
<TR>
<TD class=style>listStyleImage</TD>
<TD><BUTTON onclick="ulObj.style.listStyleImage=olObj.style.listStyleImage='none';" class=but>none</BUTTON></TD>
<TD><BUTTON onclick="ulObj.style.listStyleImage=olObj.style.listStyleImage='url(../../../gif/ball.gif)';" class=but>ball.gif</BUTTON></TD>
</TR>
</TABLE>