<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="变色" id="bt"/> <ul id="uu"> <li>红烧鲤鱼</li> <li>糖醋排骨</li> <li>红烧茄子</li> <li>酸辣土豆丝</li> <li>麻辣小龙虾</li> <li>东北烤冷面</li> <li>陕西肉夹馍</li> <li>云南过桥米线</li> </ul> <script src="common.js"></script> <script> //隔行变色 my$("bt").onclick = function () { var count = 0;//记录li的个数 //获取ul中所有的子节点 var nodes = my$("uu").childNodes; for (var i = 0; i < nodes.length; i++) { //判断这个节点是不是li if (nodes[i].nodeType == 1 && nodes[i].nodeName == "LI") { nodes[i].style.backgroundColor = count % 2 == 0 ? "red" : "yellow"; count++; } } }; </script> </body> </html>
JavaScript节点的方式隔行变色
猜你喜欢
转载自www.cnblogs.com/cuilichao/p/9374923.html
今日推荐
周排行