JavaScript隔行变色效果
分类:实例代码
JavaScript隔行变色效果属于前端实例代码,有关更多实例代码大家可以查看。
隔行变色效果在众多网站有应用,在列表条数比较多的情况下特别有效,提高了行与行之间的辨识度。纯CSS实现隔行变色当前存在一定浏览器兼容性问题,使用JavaScript实现更为稳妥。
CSS实现可以参阅CSS表格隔行变色详解一章节。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> div { width:400px; height:300px; } ul{list-style:none;} ul li { height:25px; line-height:25px; font-size:12px; } </style> <script type="text/javascript"> window.onload=function(){ var mylist=document.getElementById("list").getElementsByTagName("li"); var listlen=mylist.length; for(var i=0;i<listlen;i++) { if(i%2==0) { mylist[i].style.backgroundColor="#639"; } } } </script> </head> <body> <div> <ul id="list"> <li>大家好,欢迎来到前端教程网</li> <li>div+css教程</li> <li>希望明天会更好,因为我们奋斗了</li> <li>春天是生机勃勃的,一切充满希望。</li> <li>时间不会因为我们的懒惰而停止</li> </ul> </div> </body> </html>
相关阅读:
(1).document.getElementById()参阅document.getElementById()一章节。
(2).getElementsByTagName()参阅JavaScript getElementsByTagName()一章节。
JavaScript隔行变色效果,这样的场景在实际项目中还是用的比较多的,关于JavaScript隔行变色效果就介绍到这了。