展会信息港展会大全

CSS效果--动态更改list-style-type属性
来源:互联网   发布日期:2016-03-25 16:04:14   浏览:1850次  

导读:本例子在FireFox和IE6.0上通过测试,效果一样<style>#idDIV{font-family:verdana,tahoma;font-size:12px;list-...

本例子在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>

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港