CSS效果--動態更改list-style-type屬性

本例子在FireFox和IE6.0上通過測試，效果一樣

<style>
#idDIV{
font-family:verdana,tahoma;
font-size:12px ; 
list-style: disc inside;
line-height:18px; 
margin-left:10px;
}
#idCodeDiv{
width:100%;
padding:4px;
font-family:verdana,tahoma;
margin:12px 0px 0px 0px;
background-color:#EEEEEE;
font-weight:bold;
}
</style>

<script>
function rdl_change(e){
var oCodeDiv;
oCodeDiv=document.getElementById("idCodeDiv").innerHTML;
var oDiv=document.getElementById("idDIV").innerHTML;
var s=document.getElementById("idSel");
var sValue="";
for (i=0;i<s.length ;i++ )
{
  if(document.getElementById("idSel")[i].selected==true)
  {
    sValue=document.getElementById("idSel")[i].value;
  }
}
document.getElementById("idDIV").style.listStyleType=sValue;
document.getElementById("idCodeDiv").innerHTML="list-style :
disc inside ; 
list-style-type : "+sValue+";";
}
</script>

<ol id=idDIV>
<li>
<a href="http://www.111cn.net" target="_blank">
www.111cn.net
</a>
</li>
<li>
<a href="http://www.111cn.net" target="_blank">
asp編程網
</a>
</li>
</ol>


<select id="idSel" onchange="rdl_change();">
<option value="disc">---list-style-type---</option>
<option value="circle">circle</option>
<option value="square">square</option>
<option value="decimal">decimal</option>
<option value="lower-roman">lower-roman</option>
<option value="upper-roman">upper-roman</option>
<option value="lower-alpha">lower-alpha</option>
<option value="upper-alpha">upper-alpha</option>
<option value="none">none</option>
<option value="disc">disc</option>
</select>


<div id=idCodeDiv>list-style : disc inside ;
list-style-type : disc ;</div>