CSS effect -- dynamically change the list-style-type attribute

This example is tested on FireFox and IE6.0, with the same effect.

<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 Programming Network
</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>