CSS效果--動態更改list-style-type屬性
2024-07-11 08:40:45
供稿：網友
本例子在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.survivalescaperooms.com" target="_blank">
www.survivalescaperooms.com
</a>
</li>
<li>
<a href="http://www.survivalescaperooms.com/js" target="_blank">
武林網腳本</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>
