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.aspprogram.cn"
 
target="
_blank"
>

www.aspprogram.cn
<
/a>

<
/li>

<
li>

<
a 
href="
http://www.aspprogram.cn"
 
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>