美浩工作室是一个以90后团队为主的网站设计,制作,优化,维护为一体的网站建设工作室,为您量身定制适合企业自身的网站,欢迎咨询:15249241469

使用js给li加上数字

JavaScript mihoweb 2477℃ 0评论

在做模板的时候大家可能都会用到给ul li加数字,利用js给获取的li标签添加序号的代码如下:

QQ截图20131216141457

HTML语言:
<html>
<style type=“text/css”>
body{ font-size:14px;}
ul{ list-style:none;line-height:1.8em}
span{font-size:9px;margin-right:5px;font-family:Tahoma;color:#fff;border:1px solid #f30;background-color:#f60;padding:0 1px;line-height:10px;}
</style>
<body>
<ul id=“target”>
<li>利用js给获取的li标签添加序号</li>
<li>利用js给获取的li标签添加序号</li>
<li>利用js给获取的li标签添加序号</li>
<li>利用js给获取的li标签添加序号</li>
<li>利用js给获取的li标签添加序号</li>
</ul>
<script>
function setSN(e){
var ul = document.getElementById(e);
var lis= ul.getElementsByTagName(‘li’);
for(var i=0,l=lis.length;i<l;i++){
var tHTML = lis[i].innerHTML
lis[i].innerHTML = ‘<span>0′+(i+1)+‘</span>’+tHTML;
}
}
setSN(‘target’);
</script>
</body>
</html>

如果您喜欢这篇文章,欢迎分享订阅。

转载请注明:美浩工作室官方博客 » 使用js给li加上数字

喜欢 (0)