10-隔行变色（节点）

最新推荐文章于 2022-07-14 19:00:59 发布

陀陀吖

最新推荐文章于 2022-07-14 19:00:59 发布

阅读量197

点赞数 1

分类专栏： javascript之webAPI

本文链接：https://blog.csdn.net/weixin_40422393/article/details/90916983

版权

javascript之webAPI 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="变色" id="btn">
	<ul id="uu">
		<li>1111</li>
		<li>2222</li>
		<li>3333</li>
		<li>4444</li>
		<li>5555</li>
		<li>6666</li>
	</ul>
</body>
<script src="common.js"></script>
<script>
    my$("btn").onclick=function () {
        var counts=0;  //记录有多少个节点，节点的li
        //获取ul中所有的子节点
        var node=my$("uu").childNodes;
        //遍历的所有的节点
        for (var i=0;i<node.length;i++){
            //判断这个节点是不是lib标签
            if(node[i].nodeType==1&&node[i].nodeName=="LI"){
                node[i].style.backgroundColor=counts%2==0?"red":"yellow";
                counts++;   //8个
                // node[i].style.backgroundColor=i%2==0?"red":"yellow";     错误代码
            }
        }
    }
</script>
</html>

陀陀吖

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10-隔行变色（节点）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type="button" value="变色" id="btn"&g...
复制链接

扫一扫

专栏目录