代码描述:js li元素 隔行变色。js实现li元素隔行背景变色实例代码
为了提高各行的辨识度,隔行变色效果是一个良好的选择,下面就通过实例代码对此做一下简单介绍。 代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51qianduan.com/" /> <title>51前端</title> <style type="text/css"> #box { list-style:none; width:200px; } .even{background:#ff0000;} .odd{background:#00ff00;} </style> <script type="text/javascript"> window.onload=function() { var obj=document.getElementById("box"); if(obj) { var gs=obj.children; for(i=0;i<gs.length;i++) { gs[i].className=i%2==0?"even":"odd"; } } } </script> </head> <body> <ul id="box"> <li>51前端一</li> <li>51前端二</li> <li>51前端三</li> <li>51前端四</li> <li>51前端五</li> <li>51前端六</li> </ul> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能