JS实现隔行变色
2017-05-11 17:29
489 查看
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 300px; } li { line-height: 30px; list-style-type: none; } li span { margin:5px; } .current{ background-color: #f2ff8a !important; } </style> <script> window.onload = function(){ var lis = document.getElementsByTagName("li"); for(var i=0;i<lis.length;i++){ if(i%2==0){ lis[i].style.backgroundColor = "#c0c0c0"; } else{ lis[i].style.backgroundColor = "#abcdef"; } lis[i].onmouseover = function(){ this.className = "current"; } lis[i].onmouseout = function(){ this.className = ""; } } } </script> </head> <body> <div class="box"> <ul> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> </ul> </div> </body> </html>
相关文章推荐
- js实现表格隔行变色,鼠标在该行放上移走的变色效果,还有全选,反选等
- js实现表格隔行变色,鼠标在该行放上移走的变色效果,还有全选,反选等
- js实现表格隔行变色和鼠标移入高亮
- jQuery实现隔行变色的方法分析(对比原生JS)
- ajax+js+dom实现隔行变色效果
- JS实现隔行变色,鼠标移入高亮
- 使用原生js和jQuery实现表格的隔行变色
- 纯JS代码实现隔行变色鼠标移入高亮
- JS实现隔行变色及鼠标滑过变色
- Js 实现隔行换色及其鼠标划过变色
- js实现table列表中的隔行变色
- js实现隔行变色操作鼠标经过效果
- 纯js实现隔行变色效果
- 用两种方式实现简单的隔行变色 用js实现
- ajax+js+dom实现隔行变色效果
- js实现隔行变色-------Day40
- js实现表格的全选,反选,删除所选行以及隔行变色
- Vue.js 利用v-for中的index值实现隔行变色
- Juery实现隔行变色与传统js对比
- 纯JS代码实现隔行变色鼠标移入高亮