怎么才能在不同的ul中的li里用js实现隔行变色,如果ul的id为list
怎么才能在不同的ul中的li里用js实现隔行变色，如果ul的id为list<styletype="text/css">*{margin:0;padding:0;}#lis...
怎么才能在不同的ul中的li里用js实现隔行变色，如果ul的id为list
<style type="text/css">
* {
margin:0;
padding:0;
}
#list {
margin:100px;
list-style:none;
width:200px;
}
#list li {
height:25px;
line-height:25px;
text-align:center;
border:1px solid #ccc;
/*margin-bottom:-1px;*/
}
.list1 {
background:pink;
}
.list2 {
background:#CCFFFF;
}
</style>
</head>
<body>
<ul id="list">
<li>
第一行
</li>
<li>
第二行
</li>
<li>
第三行
</li>
<li>
第四行
</li>
<li>
第五行
</li>
<li>
第六行
</li>
</ul>
<script language="javascript">
var list = document.getElementsByTagName("li");
var len = list.length;
for (i=0;i<len;i++)
{
if (i%2==0)
{
list[i].className = "list1";
}
else
{
list[i].className = "list2";
}
}
</script>
大致是这样，但是要是专属于class=“list”的ul的li颜色变化而不是别的ul 展开
<style type="text/css">
* {
margin:0;
padding:0;
}
#list {
margin:100px;
list-style:none;
width:200px;
}
#list li {
height:25px;
line-height:25px;
text-align:center;
border:1px solid #ccc;
/*margin-bottom:-1px;*/
}
.list1 {
background:pink;
}
.list2 {
background:#CCFFFF;
}
</style>
</head>
<body>
<ul id="list">
<li>
第一行
</li>
<li>
第二行
</li>
<li>
第三行
</li>
<li>
第四行
</li>
<li>
第五行
</li>
<li>
第六行
</li>
</ul>
<script language="javascript">
var list = document.getElementsByTagName("li");
var len = list.length;
for (i=0;i<len;i++)
{
if (i%2==0)
{
list[i].className = "list1";
}
else
{
list[i].className = "list2";
}
}
</script>
大致是这样，但是要是专属于class=“list”的ul的li颜色变化而不是别的ul 展开
展开全部
var list = document.getElementsByTagName("ul"); // 查找所有ul
var len = list.length;
for (j = 0; j < len; j++) {
if (list[j].className != 'list') {
// 如果ul的className不是list
// 那么执行下一次循环
continue;
}
var li = list[j].children; // ul下的li
var liLen = li.length;
for (i = 0; i < liLen; i++) {
if (i % 2 == 0) {
li[i].className = "list1";
} else {
li[i].className = "list2";
}
}
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
